LibWeb: Add canvas.fill

This implements only one of the two forms of this function,
ctx.fill(winding_rule).
Also tweaks the quadratic curve demo to have a nice looking filled
shape.

Base/home/anon/www/canvas-path-quadratic-curve.html

@@ -33,6 +33,18 @@ canvas.addEventListener("mousemove", function(e) {
     ctx.moveTo(0, 0);
     ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
     ctx.stroke();
+
+    ctx.moveTo(30, 90);
+    ctx.lineTo(110, 20);
+    ctx.lineTo(240, 130);
+    ctx.lineTo(60, 130);
+    ctx.lineTo(190, 20);
+    ctx.lineTo(270, 90);
+    ctx.closePath();
+
+    // Fill path
+    ctx.fillStyle = 'green';
+    ctx.fill('evenodd');
 });
 
 }

Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp

@@ -61,6 +61,7 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
     put_native_function("beginPath", begin_path, 0);
     put_native_function("closePath", close_path, 0);
     put_native_function("stroke", stroke, 0);
+    put_native_function("fill", fill, 0);
     put_native_function("moveTo", move_to, 2);
     put_native_function("lineTo", line_to, 2);
     put_native_function("quadraticCurveTo", quadratic_curve_to, 4);
@@ -219,6 +220,33 @@ JS::Value CanvasRenderingContext2DWrapper::stroke(JS::Interpreter& interpreter)
     return JS::js_undefined();
 }
 
+JS::Value CanvasRenderingContext2DWrapper::fill(JS::Interpreter& interpreter)
+{
+    auto* impl = impl_from(interpreter);
+    if (!impl)
+        return {};
+    auto winding = Gfx::Painter::WindingRule::Nonzero;
+
+    if (interpreter.argument_count() == 1) {
+        auto arg0 = interpreter.argument(0);
+        if (arg0.is_string()) {
+            const auto& winding_name = arg0.as_string().string();
+            if (winding_name == "evenodd") {
+                winding = Gfx::Painter::WindingRule::EvenOdd;
+            } else if (winding_name != "nonzero") {
+                return interpreter.throw_exception<JS::TypeError>("fill winding rule must be either 'nonzero' or 'evenodd'");
+            }
+        } else {
+            return interpreter.throw_exception<JS::TypeError>("fill called with non-string");
+        }
+    } else {
+        // FIXME: Path2D object
+        return JS::js_undefined();
+    }
+    impl->fill(winding);
+    return JS::js_undefined();
+}
+
 JS::Value CanvasRenderingContext2DWrapper::move_to(JS::Interpreter& interpreter)
 {
     auto* impl = impl_from(interpreter);

Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h

@@ -56,6 +56,7 @@ private:
     static JS::Value begin_path(JS::Interpreter&);
     static JS::Value close_path(JS::Interpreter&);
     static JS::Value stroke(JS::Interpreter&);
+    static JS::Value fill(JS::Interpreter&);
     static JS::Value move_to(JS::Interpreter&);
     static JS::Value line_to(JS::Interpreter&);
     static JS::Value quadratic_curve_to(JS::Interpreter&);

Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp

@@ -179,6 +179,15 @@ void CanvasRenderingContext2D::stroke()
     painter->stroke_path(m_path, m_stroke_style, m_line_width);
 }
 
+void CanvasRenderingContext2D::fill(Gfx::Painter::WindingRule winding)
+{
+    auto painter = this->painter();
+    if (!painter)
+        return;
+
+    painter->fill_path(m_path, m_fill_style, winding);
+}
+
 RefPtr<ImageData> CanvasRenderingContext2D::create_image_data(JS::GlobalObject& global_object, int width, int height) const
 {
     return ImageData::create_with_size(global_object, width, height);

Libraries/LibWeb/DOM/CanvasRenderingContext2D.h

@@ -30,6 +30,7 @@
 #include <LibGfx/AffineTransform.h>
 #include <LibGfx/Color.h>
 #include <LibGfx/Forward.h>
+#include <LibGfx/Painter.h>
 #include <LibGfx/Path.h>
 #include <LibWeb/Bindings/Wrappable.h>
 
@@ -71,6 +72,7 @@ public:
     void line_to(float x, float y);
     void quadratic_curve_to(float cx, float cy, float x, float y);
     void stroke();
+    void fill(Gfx::Painter::WindingRule);
 
     RefPtr<ImageData> create_image_data(JS::GlobalObject&, int width, int height) const;
     void put_image_data(const ImageData&, float x, float y);