From bcb1ff4529708ed2b34e66eafc745f4918f297da Mon Sep 17 00:00:00 2001
From: seveibar <seveibar@gmail.com>
Date: Wed, 12 Aug 2026 11:17:40 -0700
Subject: [PATCH 1/2] Add line join SVG repro

---
 ...ine-joins.snapshot-acute-polyline.snap.svg | 44 +++++++++++++++++++
 tests/line-joins.snapshot.test.ts             | 26 +++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
 create mode 100644 tests/line-joins.snapshot.test.ts

diff --git a/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg b/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
new file mode 100644
index 0000000..9d6a70f
--- /dev/null
+++ b/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
@@ -0,0 +1,44 @@
+<svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-1.5,2 0,-2 1.5,2" data-type="line" data-label="" points="100,40 160,200 220,40" fill="none" stroke="#2563eb" stroke-width="32"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="240" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="320" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+              document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+                const svg = e.currentTarget;
+                const rect = svg.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const crosshair = svg.getElementById('crosshair');
+                const h = svg.getElementById('crosshair-h');
+                const v = svg.getElementById('crosshair-v');
+                const coords = svg.getElementById('coordinates');
+
+                crosshair.style.display = 'block';
+                h.setAttribute('x1', '0');
+                h.setAttribute('x2', '320');
+                h.setAttribute('y1', y);
+                h.setAttribute('y2', y);
+                v.setAttribute('x1', x);
+                v.setAttribute('x2', x);
+                v.setAttribute('y1', '0');
+                v.setAttribute('y2', '240');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":40,"c":0,"e":160,"b":0,"d":-40,"f":120};
+                // Manually invert and apply the affine transform
+                // Since we only use translate and scale, we can directly compute:
+                // x' = (x - tx) / sx
+                // y' = (y - ty) / sy
+                const sx = matrix.a;
+                const sy = matrix.d;
+                const tx = matrix.e;
+                const ty = matrix.f;
+                const realPoint = {
+                  x: (x - tx) / sx,
+                  y: (y - ty) / sy // Flip y back since we used negative scale
+                }
+
+                coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+                coords.setAttribute('x', (x + 5).toString());
+                coords.setAttribute('y', (y - 5).toString());
+              });
+              document.currentScript.parentElement.addEventListener('mouseleave', () => {
+                document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+              });
+            ]]></script></svg>
diff --git a/tests/line-joins.snapshot.test.ts b/tests/line-joins.snapshot.test.ts
new file mode 100644
index 0000000..9af8dff
--- /dev/null
+++ b/tests/line-joins.snapshot.test.ts
@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { getSvgFromGraphicsObject } from "../lib/getSvgFromGraphicsObject"
+import type { GraphicsObject } from "../lib/types"
+
+test("renders the join of a thick, acute polyline", () => {
+  const input: GraphicsObject = {
+    lines: [
+      {
+        points: [
+          { x: -1.5, y: 2 },
+          { x: 0, y: -2 },
+          { x: 1.5, y: 2 },
+        ],
+        strokeColor: "#2563eb",
+        strokeWidth: 0.8,
+      },
+    ],
+  }
+
+  const svg = getSvgFromGraphicsObject(input, {
+    svgWidth: 320,
+    svgHeight: 240,
+  })
+
+  expect(svg).toMatchSvgSnapshot(import.meta.path, "acute-polyline")
+})

From bde3d88fce685a0da5ac822649621e99e9349672 Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Wed, 12 Aug 2026 11:39:23 -0700
Subject: [PATCH 2/2] Render lines with round joins (#229)

---
 lib/drawGraphicsToCanvas.ts                              | 1 +
 lib/getPngBufferFromGraphicsObject.ts                    | 1 +
 lib/getSvgFromGraphicsObject.ts                          | 1 +
 .../line-joins.snapshot-acute-polyline.snap.svg          | 2 +-
 tests/getSvgFromGraphicsObject.test.ts                   | 9 ++++++++-
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/lib/drawGraphicsToCanvas.ts b/lib/drawGraphicsToCanvas.ts
index 8c2bd45..ba565cb 100644
--- a/lib/drawGraphicsToCanvas.ts
+++ b/lib/drawGraphicsToCanvas.ts
@@ -383,6 +383,7 @@ export function drawGraphicsToCanvas(
           ctx.lineWidth = 2
         }
         ctx.lineCap = "round"
+        ctx.lineJoin = "round"
 
         if (line.strokeDash) {
           if (typeof line.strokeDash === "string") {
diff --git a/lib/getPngBufferFromGraphicsObject.ts b/lib/getPngBufferFromGraphicsObject.ts
index 724ba1a..5328be2 100644
--- a/lib/getPngBufferFromGraphicsObject.ts
+++ b/lib/getPngBufferFromGraphicsObject.ts
@@ -234,6 +234,7 @@ export async function getPngBufferFromGraphicsObject(
       line.strokeWidth === undefined
         ? 1
         : Math.max(line.strokeWidth * strokeScale, 1)
+    ctx.lineJoin = "round"
     strokePolyline(ctx, projectedPoints, dashPattern)
 
     if (
diff --git a/lib/getSvgFromGraphicsObject.ts b/lib/getSvgFromGraphicsObject.ts
index 20aed0f..331e38c 100644
--- a/lib/getSvgFromGraphicsObject.ts
+++ b/lib/getSvgFromGraphicsObject.ts
@@ -234,6 +234,7 @@ export function getSvgFromGraphicsObject(
                   points: projectedPoints.map((p) => `${p.x},${p.y}`).join(" "),
                   fill: "none",
                   stroke: line.strokeColor || "black",
+                  "stroke-linejoin": "round",
                   "stroke-width": !line.strokeWidth
                     ? "1px"
                     : typeof line.strokeWidth === "string"
diff --git a/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg b/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
index 9d6a70f..5b7b1bd 100644
--- a/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
+++ b/tests/__snapshots__/line-joins.snapshot-acute-polyline.snap.svg
@@ -1,4 +1,4 @@
-<svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-1.5,2 0,-2 1.5,2" data-type="line" data-label="" points="100,40 160,200 220,40" fill="none" stroke="#2563eb" stroke-width="32"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="240" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="320" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+<svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-1.5,2 0,-2 1.5,2" data-type="line" data-label="" points="100,40 160,200 220,40" fill="none" stroke="#2563eb" stroke-linejoin="round" stroke-width="32"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="240" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="320" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
               document.currentScript.parentElement.addEventListener('mousemove', (e) => {
                 const svg = e.currentTarget;
                 const rect = svg.getBoundingClientRect();
diff --git a/tests/getSvgFromGraphicsObject.test.ts b/tests/getSvgFromGraphicsObject.test.ts
index 4753f1d..3e1ef6d 100644
--- a/tests/getSvgFromGraphicsObject.test.ts
+++ b/tests/getSvgFromGraphicsObject.test.ts
@@ -63,6 +63,13 @@ describe("getSvgFromGraphicsObject", () => {
     })
     expect(svg).toBeString()
     expect(svg).toContain("<polyline")
+    const polylines = svg.match(/<polyline[^>]*>/g) ?? []
+    expect(polylines).toHaveLength(2)
+    expect(
+      polylines.every((polyline) =>
+        polyline.includes('stroke-linejoin="round"'),
+      ),
+    ).toBe(true)
     // Test custom stroke properties
     expect(svg).toContain('stroke="blue"')
     // Test stroke width scaling
@@ -72,7 +79,7 @@ describe("getSvgFromGraphicsObject", () => {
     expect(strokeWidths).toMatchInlineSnapshot(`
       [
         [
-          "<polyline data-points="0,0 10,10" data-type="line" data-label="" points="40,160 160,40" fill="none" stroke="blue" stroke-width="24"",
+          "<polyline data-points="0,0 10,10" data-type="line" data-label="" points="40,160 160,40" fill="none" stroke="blue" stroke-linejoin="round" stroke-width="24"",
           "24",
         ],
       ]