diff --git a/Base/home/anon/www/canvas-path.html b/Base/home/anon/www/canvas-path.html
new file mode 100644
index 0000000000..76d4edc44e
--- /dev/null
+++ b/Base/home/anon/www/canvas-path.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 880fb86146..db445643f2 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
Your user agent is:
Some small test pages:
+ - canvas path house!
- canvas drawImage() test
- canvas + trigonometry functions
- querySelectorAll test
diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
index 27e6fef139..255d266204 100644
--- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
+++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
@@ -53,6 +53,14 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
put_native_property("strokeStyle", stroke_style_getter, stroke_style_setter);
put_native_function("strokeRect", stroke_rect, 4);
put_native_function("drawImage", draw_image, 3);
+
+ put_native_function("beginPath", begin_path, 0);
+ put_native_function("closePath", close_path, 0);
+ put_native_function("stroke", stroke, 0);
+ put_native_function("moveTo", move_to, 0);
+ put_native_function("lineTo", line_to, 0);
+
+ put_native_property("lineWidth", line_width_getter, line_width_setter);
}
CanvasRenderingContext2DWrapper::~CanvasRenderingContext2DWrapper()
@@ -162,5 +170,68 @@ void CanvasRenderingContext2DWrapper::stroke_style_setter(JS::Interpreter& inter
impl->set_stroke_style(value.to_string());
}
+JS::Value CanvasRenderingContext2DWrapper::line_width_getter(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ return JS::Value(impl->line_width());
+}
+
+void CanvasRenderingContext2DWrapper::line_width_setter(JS::Interpreter& interpreter, JS::Value value)
+{
+ if (auto* impl = impl_from(interpreter))
+ impl->set_line_width(value.to_double());
+}
+
+JS::Value CanvasRenderingContext2DWrapper::begin_path(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ impl->begin_path();
+ return JS::js_undefined();
+}
+
+JS::Value CanvasRenderingContext2DWrapper::close_path(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ impl->close_path();
+ return JS::js_undefined();
+}
+
+JS::Value CanvasRenderingContext2DWrapper::stroke(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ impl->stroke();
+ return JS::js_undefined();
+}
+
+JS::Value CanvasRenderingContext2DWrapper::move_to(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ double x = interpreter.argument(0).to_double();
+ double y = interpreter.argument(1).to_double();
+ impl->move_to(x, y);
+ return JS::js_undefined();
+}
+
+JS::Value CanvasRenderingContext2DWrapper::line_to(JS::Interpreter& interpreter)
+{
+ auto* impl = impl_from(interpreter);
+ if (!impl)
+ return {};
+ double x = interpreter.argument(0).to_double();
+ double y = interpreter.argument(1).to_double();
+ impl->line_to(x, y);
+ return JS::js_undefined();
+}
+
}
}
diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
index 55b494a6eb..5822dc77fb 100644
--- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
+++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
@@ -51,6 +51,13 @@ private:
static void fill_style_setter(JS::Interpreter&, JS::Value);
static JS::Value stroke_style_getter(JS::Interpreter&);
static void stroke_style_setter(JS::Interpreter&, JS::Value);
+ static JS::Value line_width_getter(JS::Interpreter&);
+ static void line_width_setter(JS::Interpreter&, JS::Value);
+ static JS::Value begin_path(JS::Interpreter&);
+ static JS::Value close_path(JS::Interpreter&);
+ static JS::Value stroke(JS::Interpreter&);
+ static JS::Value move_to(JS::Interpreter&);
+ static JS::Value line_to(JS::Interpreter&);
NonnullRefPtr m_impl;
};
diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
index 92c8b3d68c..e0a9320780 100644
--- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
+++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
@@ -134,4 +134,35 @@ OwnPtr CanvasRenderingContext2D::painter()
return make(*m_element->bitmap());
}
+void CanvasRenderingContext2D::begin_path()
+{
+ m_path = Gfx::Path();
+}
+
+void CanvasRenderingContext2D::close_path()
+{
+ m_path.close();
+}
+
+void CanvasRenderingContext2D::move_to(float x, float y)
+{
+ m_path.move_to({ x, y });
+}
+
+void CanvasRenderingContext2D::line_to(float x, float y)
+{
+ m_path.line_to({ x, y });
+}
+
+void CanvasRenderingContext2D::stroke()
+{
+ dbg() << "stroke path " << m_path;
+
+ auto painter = this->painter();
+ if (!painter)
+ return;
+
+ painter->stroke_path(m_path, m_stroke_style, m_line_width);
+}
+
}
diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
index c92446f9d0..dce9683d88 100644
--- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
+++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
@@ -30,6 +30,7 @@
#include
#include
#include
+#include
#include
namespace Web {
@@ -61,6 +62,15 @@ public:
void scale(float sx, float sy);
void translate(float x, float y);
+ void set_line_width(float line_width) { m_line_width = line_width; }
+ float line_width() const { return m_line_width; }
+
+ void begin_path();
+ void close_path();
+ void move_to(float x, float y);
+ void line_to(float x, float y);
+ void stroke();
+
private:
explicit CanvasRenderingContext2D(HTMLCanvasElement&);
@@ -73,6 +83,9 @@ private:
Gfx::AffineTransform m_transform;
Gfx::Color m_fill_style;
Gfx::Color m_stroke_style;
+ float m_line_width { 1 };
+
+ Gfx::Path m_path;
};
}