CanvasRenderingContext2D lineCap property support added

rbri · rbri · commit 9fe4e38765ec · 2026-07-10T17:09:33.000+02:00
diff --git a/src/changes/changes.xml b/src/changes/changes.xml
@@ -8,6 +8,9 @@
 
     <body>
         <release version="5.3.0" date="July xx, 2026" description="Chrome/Edge 150, Bugfixes">
+            <action type="add" dev="rbri">
+                CanvasRenderingContext2D lineCap property support added.
+            </action>
             <action type="add" dev="rbri">
                 CanvasRenderingContext2D lineJoin property support added.
             </action>
diff --git a/src/main/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2D.java b/src/main/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2D.java
@@ -35,6 +35,7 @@
 import org.htmlunit.javascript.host.html.HTMLImageElement;
 import org.htmlunit.platform.Platform;
 import org.htmlunit.platform.canvas.rendering.RenderingBackend;
+import org.htmlunit.platform.canvas.rendering.RenderingBackend.LineCap;
 import org.htmlunit.platform.canvas.rendering.RenderingBackend.LineJoin;
 import org.htmlunit.platform.canvas.rendering.RenderingBackend.WindingRule;
 import org.htmlunit.protocol.data.DataURLConnection;
@@ -855,4 +856,44 @@ public void setLineJoin(final String lineJoin) {
                 // ignore invalid values per spec
         }
     }
+
+    /**
+     * Returns the the shape used to join two line segments where they meet.
+     * There are three possible values for this property: "round", "bevel",
+     * and "miter". The default is "miter".
+     *
+     * @return the the shape used to join two line segments
+     */
+    @JsxGetter
+    public String getLineCap() {
+        switch (getRenderingBackend().getLineCap()) {
+            case BUTT:
+                return "butt";
+            case ROUND:
+                return "round";
+            default:
+                return "square";
+        }
+    }
+
+    /**
+     * Sets the {@code lineCap} property.
+     * @param lineCap the {@code lineCap} property value
+     */
+    @JsxSetter
+    public void setLineCap(final String lineCap) {
+        switch (lineCap) {
+            case "butt":
+                getRenderingBackend().setLineCap(LineCap.BUTT);
+                break;
+            case "round":
+                getRenderingBackend().setLineCap(LineCap.ROUND);
+                break;
+            case "square":
+                getRenderingBackend().setLineCap(LineCap.SQUARE);
+                break;
+            default:
+                // ignore invalid values per spec
+        }
+    }
 }
diff --git a/src/main/java/org/htmlunit/platform/canvas/rendering/AwtRenderingBackend.java b/src/main/java/org/htmlunit/platform/canvas/rendering/AwtRenderingBackend.java
@@ -71,7 +71,7 @@ public class AwtRenderingBackend implements RenderingBackend {
     private Color fillColor_;
     private Color strokeColor_;
 
-    private int lineCap_;
+    private LineCap lineCap_;
     private LineJoin lineJoin_;
     private float miterLimit_;
 
@@ -279,7 +279,7 @@ public AwtRenderingBackend(final int imageWidth, final int imageHeight) {
         graphics2D_.setColor(Color.black);
         graphics2D_.clearRect(0, 0, imageWidth, imageHeight);
 
-        lineCap_ = BasicStroke.CAP_BUTT;
+        lineCap_ = LineCap.BUTT;
         lineJoin_ = LineJoin.MITER;
         miterLimit_ = 10.0f;
 
@@ -946,7 +946,8 @@ public void stroke() {
             LOG.debug("[" + id_ + "] stroke()");
         }
 
-        graphics2D_.setStroke(new BasicStroke(getLineWidth(), lineCap_, toAwtLineJoin(lineJoin_), miterLimit_));
+        graphics2D_.setStroke(new BasicStroke(getLineWidth(),
+                toAwtLineCap(lineCap_), toAwtLineJoin(lineJoin_), miterLimit_));
         graphics2D_.setColor(strokeColor_);
         for (final Path2D path2d : subPaths_) {
             if (hasSegments(path2d)) {
@@ -964,7 +965,8 @@ public void strokeRect(final double x, final double y, final double w, final dou
             LOG.debug("[" + id_ + "] strokeRect(" + x + ", "  + y + ", "  + w + ", "  + h + ")");
         }
 
-        graphics2D_.setStroke(new BasicStroke(getLineWidth(), lineCap_, toAwtLineJoin(lineJoin_), miterLimit_));
+        graphics2D_.setStroke(new BasicStroke(getLineWidth(),
+                toAwtLineCap(lineCap_), toAwtLineJoin(lineJoin_), miterLimit_));
         graphics2D_.setColor(strokeColor_);
         graphics2D_.draw(rectPath(x, y, w, h));
     }
@@ -1088,6 +1090,28 @@ public void setLineJoin(final LineJoin lineJoin) {
         lineJoin_ = lineJoin;
     }
 
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public LineCap getLineCap() {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] getLineCap()");
+        }
+        return lineCap_;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void setLineCap(final LineCap lineCap) {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] setLineCap(" + lineCap + ")");
+        }
+        lineCap_ = lineCap;
+    }
+
     private Path2D getCurrentSubPath() {
         if (subPaths_.isEmpty()) {
             final Path2D subPath = new Path2D.Double();
@@ -1156,6 +1180,14 @@ private static int toAwtLineJoin(final LineJoin lineJoin) {
         };
     }
 
+    private static int toAwtLineCap(final LineCap lineCap) {
+        return switch (lineCap) {
+            case ROUND -> BasicStroke.CAP_ROUND;
+            case SQUARE -> BasicStroke.CAP_SQUARE;
+            case BUTT -> BasicStroke.CAP_BUTT;
+        };
+    }
+
     private static final class SaveState {
         private final AffineTransform transformation_;
         private final float globalAlpha_;
@@ -1164,7 +1196,7 @@ private static final class SaveState {
         private final Color strokeColor_;
         private final Shape clip_;
 
-        private final int lineCap_;
+        private final LineCap lineCap_;
         private final LineJoin lineJoin_;
         private final float miterLimit_;
 
diff --git a/src/main/java/org/htmlunit/platform/canvas/rendering/NoOpRenderingBackend.java b/src/main/java/org/htmlunit/platform/canvas/rendering/NoOpRenderingBackend.java
@@ -397,4 +397,25 @@ public void setLineJoin(final LineJoin lineJoin) {
             LOG.debug("[" + id_ + "] setLineJoin(" + lineJoin + ")");
         }
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public LineCap getLineCap() {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] getLineCap()");
+        }
+        return LineCap.BUTT;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void setLineCap(final LineCap lineCap) {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] setLineCap(" + lineCap + ")");
+        }
+    }
 }
diff --git a/src/main/java/org/htmlunit/platform/canvas/rendering/RenderingBackend.java b/src/main/java/org/htmlunit/platform/canvas/rendering/RenderingBackend.java
@@ -48,6 +48,18 @@ enum LineJoin {
         BEVEL
     }
 
+    /**
+     * LineCap to be used while rendering.
+     */
+    enum LineCap {
+        /** LineCap.BUTT. */
+        BUTT,
+        /** LineCap.ROUND. */
+        ROUND,
+        /** LineCap.SQUARE. */
+        SQUARE
+    }
+
     /**
      * Starts a new path by emptying the list of sub-paths.
      */
@@ -363,4 +375,17 @@ void putImageData(byte[] imageDataBytes, int imageDataWidth, int imageDataHeight
      * @param lineJoin the {@code lineJoin} property value
      */
     void setLineJoin(LineJoin lineJoin);
+
+    /**
+     * Returns the shape used to draw the end points of lines.
+     *
+     * @return the shape used to draw the end points of lines.
+     */
+    LineCap getLineCap();
+
+    /**
+     * Sets the {@code lineCap} property.
+     * @param lineCap the {@code lineCap} property value
+     */
+    void setLineCap(LineCap lineCap);
 }
diff --git a/src/test/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2DTest.java b/src/test/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2DTest.java
@@ -2923,6 +2923,89 @@ public void drawBevel() throws Exception {
                 + "    context.stroke();\n");
     }
 
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("butt")
+    public void lineCapDefault() throws Exception {
+        verify("<canvas id='myCanvas' width='2' height='2'></canvas>\n",
+               "log(context.lineCap);");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"miter", "round", "round", "butt", "butt", "butt"})
+    public void lineJoinCapGet() throws Exception {
+        verify("<canvas id='myCanvas' width='2' height='2'></canvas>\n",
+                "log(context.lineCap);\n"
+                + "context.lineCap = 'round'\n"
+                + "log(context.lineCap);\n"
+                + "context.lineCap = 'SquARE'\n"
+                + "log(context.lineCap);\n"
+                + "context.lineCap = 'butt'\n"
+                + "log(context.lineCap);\n"
+                + "context.lineCap = '  square '\n"
+                + "log(context.lineCap);\n"
+                + "context.lineCap = '  unknow '\n"
+                + "log(context.lineCap);\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAAALklEQVR4AdTRsQ0AAAgCQXT/nZUBKGjfSEdzYVUesXi2pYiI"
+            + "sSU/ETOmpCCWeQAAAP//NWxm8gAAAAZJREFUAwALrgYppm2j7wAAAABJRU5ErkJggg==")
+    public void drawCapButt() throws Exception {
+        draw("<canvas id='myCanvas' width='10', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineCap = 'butt';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(6, 5);\n"
+                + "    context.lineTo(6, 15);\n"
+                + "    context.stroke();\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAAAdklEQVR4AeySwQmAMBRDP951QxfQeXQBN9QFTELpIf8fRK+K"
+            + "KWn+I4XSIR5+n8ANh5xN9LAR3sjBgsnYRM8sgTMA/5V5I5scVOagQ33/g/0qKvP6eq6iTZk3HgWozMEV4A6xhaJnll4PmOBg"
+            + "gqHoYfN7VFgtNwAAAP//ybmhIAAAAAZJREFUAwD8YQ4p7/bWhAAAAABJRU5ErkJggg==")
+    public void drawCapRound() throws Exception {
+        draw("<canvas id='myCanvas' width='10', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineCap = 'round';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(6, 5);\n"
+                + "    context.lineTo(6, 15);\n"
+                + "    context.stroke();\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAUCAYAAAC07qxWAAAANUlEQVR4AeySMQoAAAgCq///uQwaHcLZyIYIg8OKZ8mHjQdM"
+            + "ITvCkLcdOZfbGs+CSAymfx4HAAD//5I7/cIAAAAGSURBVAMA6AgGKb9SbOsAAAAASUVORK5CYII=")
+    public void drawCapSquare() throws Exception {
+        draw("<canvas id='myCanvas' width='10', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineCap = 'square';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(6, 5);\n"
+                + "    context.lineTo(6, 15);\n"
+                + "    context.stroke();\n");
+    }
+
     private void draw(final String canvasSetup, final String drawJS) throws Exception {
         final String html = DOCTYPE_HTML
             + "<html><head>\n"
