LibWeb+LibGfx: Paint line_cap, line_join for Canvas Strokes

Author: https://github.com/mehrankamal
Commit: bb87de58a0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3944
Reviewed-by: https://github.com/gmta
Reviewed-by: https://github.com/nico ✅

Libraries/LibGfx/Painter.h

@@ -11,6 +11,7 @@
 #include <LibGfx/Filter.h>
 #include <LibGfx/Forward.h>
 #include <LibGfx/PaintStyle.h>
+#include <LibGfx/Path.h>
 #include <LibGfx/ScalingMode.h>
 #include <LibGfx/WindingRule.h>
 
@@ -30,6 +31,7 @@ public:
     virtual void stroke_path(Gfx::Path const&, Gfx::Color, float thickness) = 0;
     virtual void stroke_path(Gfx::Path const&, Gfx::Color, float thickness, float blur_radius, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) = 0;
     virtual void stroke_path(Gfx::Path const&, Gfx::PaintStyle const&, ReadonlySpan<Gfx::Filter>, float thickness, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) = 0;
+    virtual void stroke_path(Gfx::Path const&, Gfx::PaintStyle const&, ReadonlySpan<Gfx::Filter>, float thickness, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator, Gfx::Path::CapStyle const&, Gfx::Path::JoinStyle const&) = 0;
 
     virtual void fill_path(Gfx::Path const&, Gfx::Color, Gfx::WindingRule) = 0;
     virtual void fill_path(Gfx::Path const&, Gfx::Color, Gfx::WindingRule, float blur_radius, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) = 0;

Libraries/LibGfx/PainterSkia.cpp

@@ -207,6 +207,25 @@ void PainterSkia::stroke_path(Gfx::Path const& path, Gfx::PaintStyle const& pain
     impl().canvas()->drawPath(sk_path, paint);
 }
 
+void PainterSkia::stroke_path(Gfx::Path const& path, Gfx::PaintStyle const& paint_style, ReadonlySpan<Gfx::Filter> filters, float thickness, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator, Gfx::Path::CapStyle const& cap_style, Gfx::Path::JoinStyle const& join_style)
+{
+    // Skia treats zero thickness as a special case and will draw a hairline, while we want to draw nothing.
+    if (thickness <= 0)
+        return;
+
+    auto sk_path = to_skia_path(path);
+    auto paint = to_skia_paint(paint_style, filters);
+    paint.setAntiAlias(true);
+    float alpha = paint.getAlphaf();
+    paint.setAlphaf(alpha * global_alpha);
+    paint.setStyle(SkPaint::Style::kStroke_Style);
+    paint.setStrokeWidth(thickness);
+    paint.setStrokeCap(to_skia_cap(cap_style));
+    paint.setStrokeJoin(to_skia_join(join_style));
+    paint.setBlender(to_skia_blender(compositing_and_blending_operator));
+    impl().canvas()->drawPath(sk_path, paint);
+}
+
 void PainterSkia::fill_path(Gfx::Path const& path, Gfx::Color color, Gfx::WindingRule winding_rule)
 {
     SkPaint paint;

Libraries/LibGfx/PainterSkia.h

@@ -25,6 +25,7 @@ public:
     virtual void stroke_path(Gfx::Path const&, Gfx::Color, float thickness) override;
     virtual void stroke_path(Gfx::Path const&, Gfx::Color, float thickness, float blur_radius, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) override;
     virtual void stroke_path(Gfx::Path const&, Gfx::PaintStyle const&, ReadonlySpan<Gfx::Filter>, float thickness, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) override;
+    virtual void stroke_path(Gfx::Path const&, Gfx::PaintStyle const&, ReadonlySpan<Gfx::Filter>, float thickness, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator, Gfx::Path::CapStyle const&, Gfx::Path::JoinStyle const&) override;
     virtual void fill_path(Gfx::Path const&, Gfx::Color, Gfx::WindingRule) override;
     virtual void fill_path(Gfx::Path const&, Gfx::Color, Gfx::WindingRule, float blur_radius, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator) override;
     virtual void fill_path(Gfx::Path const&, Gfx::PaintStyle const&, ReadonlySpan<Gfx::Filter>, float global_alpha, Gfx::CompositingAndBlendingOperator compositing_and_blending_operator, Gfx::WindingRule) override;

Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp

@@ -292,6 +292,33 @@ void CanvasRenderingContext2D::begin_path()
     path().clear();
 }
 
+static Gfx::Path::CapStyle to_gfx_cap(Bindings::CanvasLineCap const& cap_style)
+{
+    switch (cap_style) {
+    case Bindings::CanvasLineCap::Butt:
+        return Gfx::Path::CapStyle::Butt;
+    case Bindings::CanvasLineCap::Round:
+        return Gfx::Path::CapStyle::Round;
+    case Bindings::CanvasLineCap::Square:
+        return Gfx::Path::CapStyle::Square;
+    }
+    VERIFY_NOT_REACHED();
+}
+
+static Gfx::Path::JoinStyle to_gfx_join(Bindings::CanvasLineJoin const& join_style)
+{
+    switch (join_style) {
+    case Bindings::CanvasLineJoin::Round:
+        return Gfx::Path::JoinStyle::Round;
+    case Bindings::CanvasLineJoin::Bevel:
+        return Gfx::Path::JoinStyle::Bevel;
+    case Bindings::CanvasLineJoin::Miter:
+        return Gfx::Path::JoinStyle::Miter;
+    }
+
+    VERIFY_NOT_REACHED();
+}
+
 void CanvasRenderingContext2D::stroke_internal(Gfx::Path const& path)
 {
     auto* painter = this->painter();
@@ -302,8 +329,10 @@ void CanvasRenderingContext2D::stroke_internal(Gfx::Path const& path)
 
     auto& state = drawing_state();
 
-    // FIXME: Honor state's line_cap, line_join, miter_limit, dash_list, and line_dash_offset.
-    painter->stroke_path(path, state.stroke_style.to_gfx_paint_style(), state.filters, state.line_width, state.global_alpha, state.current_compositing_and_blending_operator);
+    // FIXME: Honor state's miter_limit, dash_list, and line_dash_offset.
+    auto line_cap = to_gfx_cap(state.line_cap);
+    auto line_join = to_gfx_join(state.line_join);
+    painter->stroke_path(path, state.stroke_style.to_gfx_paint_style(), state.filters, state.line_width, state.global_alpha, state.current_compositing_and_blending_operator, line_cap, line_join);
 
     did_draw(path.bounding_box());
 }

Tests/LibWeb/Screenshot/expected/canvas-stroke-styles-ref.html

@@ -0,0 +1,9 @@
+<style>
+    * {
+        margin: 0;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/canvas-stroke-styles-ref.png" />

Tests/LibWeb/Screenshot/input/canvas-stroke-styles.html

@@ -0,0 +1,147 @@
+<link rel="match" href="../expected/canvas-stroke-styles-ref.html" />
+<canvas id="canvas" width="400" height="350"></canvas>
+<style>
+    #canvas {
+        border: 1px solid black;
+    }
+
+    body {
+        background: white;
+    }
+</style>
+<script>
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+
+    // Line styles
+    ctx.lineWidth = 10;
+
+    // Butt cap (default)
+    ctx.lineCap = "butt";
+    ctx.beginPath();
+    ctx.moveTo(20, 30);
+    ctx.lineTo(100, 30);
+    ctx.stroke();
+
+    // Butt cap, zero length path
+    ctx.beginPath();
+    ctx.moveTo(120, 30);
+    ctx.lineTo(120, 30);
+    ctx.stroke();
+
+    // Round cap
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(20, 75);
+    ctx.lineTo(100, 75);
+    ctx.stroke();
+
+    // Round cap, zero length path
+    ctx.beginPath();
+    ctx.moveTo(120, 75);
+    ctx.lineTo(120, 75);
+    ctx.stroke();
+
+    // Square cap
+    ctx.lineCap = "square";
+    ctx.beginPath();
+    ctx.moveTo(20, 120);
+    ctx.lineTo(100, 120);
+    ctx.stroke();
+
+    // Square cap, zero length path
+    ctx.beginPath();
+    ctx.moveTo(120, 120);
+    ctx.lineTo(120, 120);
+    ctx.stroke();
+
+    // Open path
+    ctx.lineCap = "butt";
+    ctx.beginPath();
+    ctx.moveTo(150, 50);
+    ctx.lineTo(250, 50);
+    ctx.lineTo(200, 100);
+    ctx.lineTo(150, 50);
+    ctx.stroke();
+
+    // Closed path with round lineJoin
+    ctx.lineCap = "butt";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(300, 50);
+    ctx.lineTo(350, 100);
+    ctx.lineTo(250, 100);
+    ctx.lineTo(300, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+    // Miter limit test.
+    ctx.lineWidth = 5;
+    ctx.lineJoin = "miter";
+    ctx.beginPath();
+    ctx.moveTo(380, 100);
+    ctx.lineTo(385, 20);
+    ctx.lineTo(390, 100);
+    ctx.stroke();
+
+    ctx.miterLimit = 20;
+    ctx.beginPath();
+    ctx.moveTo(380, 230);
+    ctx.lineTo(385, 150);
+    ctx.lineTo(390, 230);
+    ctx.stroke();
+
+    // Different angles, butt caps
+    ctx.lineCap = "butt";
+    ctx.lineWidth = 5;
+
+    let centerX = 100;
+    const centerY = 230;
+    const innerRadius = 50;
+    const outerRadius = 80;
+
+    for (let angle = 0; angle < 360; angle += 15) {
+        const radians = (angle * Math.PI) / 180;
+        const startX = centerX + innerRadius * Math.cos(radians);
+        const startY = centerY + innerRadius * Math.sin(radians);
+        const endX = centerX + outerRadius * Math.cos(radians);
+        const endY = centerY + outerRadius * Math.sin(radians);
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+    }
+
+    // Circles with different dashes
+    let dashes = [[15, 3, 3, 3, 3, 3, 3, 3], [1], [12, 3, 3]];
+    for (let r = innerRadius - 10, i = 0; r >= 10; r -= 10, i++) {
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.setLineDash(dashes[i % dashes.length]);
+        ctx.lineDashOffset = (r - 30) / 2;
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.lineDashOffset = 0;
+
+    // Different angles, round caps
+    ctx.lineCap = "round";
+    ctx.lineWidth = 5;
+
+    centerX = 280;
+
+    for (let angle = 0; angle < 360; angle += 15) {
+        const radians = (angle * Math.PI) / 180;
+        const startX = centerX + innerRadius * Math.cos(radians);
+        const startY = centerY + innerRadius * Math.sin(radians);
+        const endX = centerX + outerRadius * Math.cos(radians);
+        const endY = centerY + outerRadius * Math.sin(radians);
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+    }
+</script>