CanvasRenderingContext2D lineJoin property support added

rbri · rbri · commit 3144f8d4ae8b · 2026-07-10T12:14:35.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 lineJoin property support added.
+            </action>
             <action type="add" dev="rbri" issue="#1149">
                 Checkstyle rule set updated: JavadocStyle -> SummaryJavadoc.
             </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.LineJoin;
 import org.htmlunit.platform.canvas.rendering.RenderingBackend.WindingRule;
 import org.htmlunit.protocol.data.DataURLConnection;
 import org.htmlunit.util.MimeType;
@@ -814,4 +815,44 @@ public void translate(final double x, final double y) {
     public HTMLCanvasElement getCanvas() {
         return canvas_;
     }
+
+    /**
+     * 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 getLineJoin() {
+        switch (getRenderingBackend().getLineJoin()) {
+            case ROUND:
+                return "round";
+            case BEVEL:
+                return "bevel";
+            default:
+                return "miter";
+        }
+    }
+
+    /**
+     * Sets the {@code lineJoin} property.
+     * @param lineJoin the {@code lineJoin} property value
+     */
+    @JsxSetter
+    public void setLineJoin(final String lineJoin) {
+        switch (lineJoin) {
+            case "round":
+                getRenderingBackend().setLineJoin(LineJoin.ROUND);
+                break;
+            case "bevel":
+                getRenderingBackend().setLineJoin(LineJoin.BEVEL);
+                break;
+            case "miter":
+                getRenderingBackend().setLineJoin(LineJoin.MITER);
+                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
@@ -72,7 +72,7 @@ public class AwtRenderingBackend implements RenderingBackend {
     private Color strokeColor_;
 
     private int lineCap_;
-    private int lineJoin_;
+    private LineJoin lineJoin_;
     private float miterLimit_;
 
     private final List<Path2D> subPaths_;
@@ -280,7 +280,7 @@ public AwtRenderingBackend(final int imageWidth, final int imageHeight) {
         graphics2D_.clearRect(0, 0, imageWidth, imageHeight);
 
         lineCap_ = BasicStroke.CAP_BUTT;
-        lineJoin_ = BasicStroke.JOIN_MITER;
+        lineJoin_ = LineJoin.MITER;
         miterLimit_ = 10.0f;
 
         subPaths_ = new ArrayList<>();
@@ -946,7 +946,7 @@ public void stroke() {
             LOG.debug("[" + id_ + "] stroke()");
         }
 
-        graphics2D_.setStroke(new BasicStroke(getLineWidth(), lineCap_, lineJoin_, miterLimit_));
+        graphics2D_.setStroke(new BasicStroke(getLineWidth(), lineCap_, toAwtLineJoin(lineJoin_), miterLimit_));
         graphics2D_.setColor(strokeColor_);
         for (final Path2D path2d : subPaths_) {
             if (hasSegments(path2d)) {
@@ -964,7 +964,7 @@ 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_, lineJoin_, miterLimit_));
+        graphics2D_.setStroke(new BasicStroke(getLineWidth(), lineCap_, toAwtLineJoin(lineJoin_), miterLimit_));
         graphics2D_.setColor(strokeColor_);
         graphics2D_.draw(rectPath(x, y, w, h));
     }
@@ -1066,6 +1066,28 @@ public void closePath() {
         subPaths_.add(nextPath);
     }
 
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public LineJoin getLineJoin() {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] getLineJoin()");
+        }
+        return lineJoin_;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void setLineJoin(final LineJoin lineJoin) {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] setLineJoin(" + lineJoin + ")");
+        }
+        lineJoin_ = lineJoin;
+    }
+
     private Path2D getCurrentSubPath() {
         if (subPaths_.isEmpty()) {
             final Path2D subPath = new Path2D.Double();
@@ -1126,6 +1148,14 @@ private static Color toAwtColor(final org.htmlunit.html.impl.Color color) {
         return new Color(color.getRed(), color.getGreen(), color.getBlue(), color.getAlpha());
     }
 
+    private static int toAwtLineJoin(final LineJoin lineJoin) {
+        return switch (lineJoin) {
+            case MITER -> BasicStroke.JOIN_MITER;
+            case ROUND -> BasicStroke.JOIN_ROUND;
+            case BEVEL -> BasicStroke.JOIN_BEVEL;
+        };
+    }
+
     private static final class SaveState {
         private final AffineTransform transformation_;
         private final float globalAlpha_;
@@ -1135,7 +1165,7 @@ private static final class SaveState {
         private final Shape clip_;
 
         private final int lineCap_;
-        private final int lineJoin_;
+        private final LineJoin lineJoin_;
         private final float miterLimit_;
 
         private final Font font_;
diff --git a/src/main/java/org/htmlunit/platform/canvas/rendering/NoOpRenderingBackend.java b/src/main/java/org/htmlunit/platform/canvas/rendering/NoOpRenderingBackend.java
@@ -376,4 +376,25 @@ public void closePath() {
             LOG.debug("[" + id_ + "] closePath()");
         }
     }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public LineJoin getLineJoin() {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] getLineJoin()");
+        }
+        return LineJoin.MITER;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void setLineJoin(final LineJoin lineJoin) {
+        if (LOG.isDebugEnabled()) {
+            LOG.debug("[" + id_ + "] setLineJoin(" + lineJoin + ")");
+        }
+    }
 }
diff --git a/src/main/java/org/htmlunit/platform/canvas/rendering/RenderingBackend.java b/src/main/java/org/htmlunit/platform/canvas/rendering/RenderingBackend.java
@@ -36,6 +36,18 @@ enum WindingRule {
         EVEN_ODD
     }
 
+    /**
+     * LineJoin to be used while rendering.
+     */
+    enum LineJoin {
+        /** LineJoin.MITER. */
+        MITER,
+        /** LineJoin.ROUND. */
+        ROUND,
+        /** LineJoin.BEVEL. */
+        BEVEL
+    }
+
     /**
      * Starts a new path by emptying the list of sub-paths.
      */
@@ -322,6 +334,9 @@ void putImageData(byte[] imageDataBytes, int imageDataWidth, int imageDataHeight
     void closePath();
 
     /**
+     * Returns the alpha (transparency) value that is applied to shapes and images
+     *         before they are drawn onto the canvas.
+     *
      * @return the alpha (transparency) value that is applied to shapes and images
      *         before they are drawn onto the canvas.
      */
@@ -333,4 +348,19 @@ void putImageData(byte[] imageDataBytes, int imageDataWidth, int imageDataHeight
      * @param globalAlpha the new alpha
      */
     void setGlobalAlpha(double globalAlpha);
+
+    /**
+     * 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
+     */
+    LineJoin getLineJoin();
+
+    /**
+     * Sets the {@code lineJoin} property.
+     * @param lineJoin the {@code lineJoin} property value
+     */
+    void setLineJoin(LineJoin lineJoin);
 }
diff --git a/src/test/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2DTest.java b/src/test/java/org/htmlunit/javascript/host/canvas/CanvasRenderingContext2DTest.java
@@ -2827,6 +2827,102 @@ public void getImageDataPixelOrder() throws Exception {
                 + "log(s);\n");
     }
 
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("miter")
+    public void lineJoinDefault() throws Exception {
+        verify("<canvas id='myCanvas' width='2' height='2'></canvas>\n",
+               "log(context.lineJoin);");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts({"miter", "round", "round", "bevel", "bevel", "bevel"})
+    public void lineJoinSetGet() throws Exception {
+        verify("<canvas id='myCanvas' width='2' height='2'></canvas>\n",
+                "log(context.lineJoin);\n"
+                + "context.lineJoin = 'round'\n"
+                + "log(context.lineJoin);\n"
+                + "context.lineJoin = 'BeVEl'\n"
+                + "log(context.lineJoin);\n"
+                + "context.lineJoin = 'bevel'\n"
+                + "log(context.lineJoin);\n"
+                + "context.lineJoin = '  round '\n"
+                + "log(context.lineJoin);\n"
+                + "context.lineJoin = '  unknow '\n"
+                + "log(context.lineJoin);\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABK0lEQVR4AcSTvy4EURjFN2gVGl6CWq2lFZ0HEI0gQoVezwNo"
+            + "xWPoVRoP4B0Ufr+b+Saz98/MFJLdnDP3u+c75+xusru2+OfXygrP+CKSYxxzPuE6FQ8dnRnbmFN4R3y7ozNjG1OFO0TvYcBZ"
+            + "Le7FOVV4S2IDBpzV4l6cY4W7uC9gDjV3uZ7uY4U3yVF/NHetwgN6TmEL7vQU+1bhdeEshaqnVnhC9hBOQY/eJV+t8HLJMX4p"
+            + "vHnhOfl9OBd6zfT+YeEmavGOaOKdh+QoYMZsWgwLr1C2YA3xX67tzJhNu2GhoSPUNzjEE5fPjs6MPfSaMZvEYaHCB49j6O/s"
+            + "i/MHvsCAs5o7PXrNxH6RF8bilWEPPsNvGHC21J2e0PuzVajhl8cjzOHXc5fr6f4HAAD//xGJfzIAAAAGSURBVAMAPK0mKVxT"
+            + "+QwAAAAASUVORK5CYII=")
+    public void drawMiter() throws Exception {
+        draw("<canvas id='myCanvas' width='20', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineJoin = 'miter';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(5, 17);\n"
+                + "    context.lineTo(10, 8);\n"
+                + "    context.lineTo(15, 17);\n"
+                + "    context.stroke();\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABLklEQVR4AeySu2oCQRSGl9SBXB4ipEmXJiSkTJMmCUmZJgQS"
+            + "LFS81GqvnYUgaGMliLVPYCdoITY+gOAjCPodcZfZnTPrgpbK/3lmzuXf3dk98478OxkefqBJzvCXy6yhC2WI1T5DMWjuHL6I"
+            + "JZAcQVec4Q0jaYgqQ+IWVMUZyuCVMnVJTmoEWy7DR1pT4NI/hWew5DLMWp12Qu3RDN+Y/YR9eqfB6tMM8zQmVS7aGDX8o+EJ"
+            + "kuqBxtBZm4bnFIugaUCyD5rkiWR2WzMNC2SuQVOFpOuDvqAmpgTPMw1l4JVsD0y12AxhAlUw1WbzAnJBQthQEjIob+6bzQyW"
+            + "UANfDRYLGMMH/MAIApl3GCRZdOAO6jAFX3MWYnpPVM/UZUi/t+IveBTWvuRopObvQ3EDAAD//4EKc+UAAAAGSURBVAMAyMAm"
+            + "KRVYII8AAAAASUVORK5CYII=")
+    public void drawRound() throws Exception {
+        draw("<canvas id='myCanvas' width='20', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineJoin = 'round';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(5, 17);\n"
+                + "    context.lineTo(10, 8);\n"
+                + "    context.lineTo(15, 17);\n"
+                + "    context.stroke();\n");
+    }
+
+    /**
+     * @throws Exception if the test fails
+     */
+    @Test
+    @Alerts("data:image/png;base64,"
+            + "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABIElEQVR4AeySrW4CQRSFN3VNTZs06VM0NU1dbZuAAywCEgQC"
+            + "geDHEH4MBhwCBQZL0DwBjgQEwfAAJDwCgu9CdjO7e2chgaAg59uZOXfuyTC7T86Nf4/A6y/07nfY4Mwa2LqiTvhBS93CO76q"
+            + "qMC22nEyW6ch/LQF/rA1AzblKXxBSLZA6wmMhJox96ZaYIrqP5xTkg0x8EkLrPh2RC+qwXIwsMCGb7hUv2zMgScz8AW3CJqm"
+            + "mBPQVMZ8hqPMwBLOK2hqYsoHzhDSG453TWagNMQpjsHUgMUMltABU0MWfyC9DI5jBoohjfKW0yzWsIMuuOoz2cICEpCFOXgK"
+            + "BrqFEZNP6MEKXG2YSKi8OPVObYH0OXsecncMPsnfk5rPdBcHAAAA//9GRiCmAAAABklEQVQDAFchJilYW2vqAAAAAElFTkSu"
+            + "QmCC")
+    public void drawBevel() throws Exception {
+        draw("<canvas id='myCanvas' width='20', height='20' style='border: 1px solid red;'></canvas>\n",
+                "      context.lineJoin = 'bevel';\n"
+                + "    context.lineWidth = 6;\n"
+                + "    context.beginPath();\n"
+                + "    context.moveTo(5, 17);\n"
+                + "    context.lineTo(10, 8);\n"
+                + "    context.lineTo(15, 17);\n"
+                + "    context.stroke();\n");
+    }
+
     private void draw(final String canvasSetup, final String drawJS) throws Exception {
         final String html = DOCTYPE_HTML
             + "<html><head>\n"
