From 2fc555a4ff968778ecc7e4e7e508bce0b914a353 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 2 Jun 2026 09:40:59 -0400
Subject: [PATCH] pen tool: live draft stroke width matches the panel value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pen draft path was using a canvas-relative thickness (lineW * 2,
derived from the canvas dimensions) for its preview stroke, so the
ribbon you saw while drawing looked different from the path you got
after committing. The committed path stores its stroke width in
pixel-space (1 unit = 1 px @ 96 dpi); the overlay renders in inch
space, so the live preview now divides _penToolOpts.penStrokeWidth
by 96 — same trick the pencil draft already uses — and adds round
line-cap / line-join so curves look consistent with the committed
path.
---
 src/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 17accd5..b3fc1cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11610,7 +11610,13 @@
           path.setAttribute('d', d);
           path.setAttribute('fill', 'none');
           path.setAttribute('stroke', _penToolOpts.penStrokeColor);
-          path.setAttribute('stroke-width', String(lineW * 2));
+          // The overlay is in canvas-inch space but the committed path
+          // is in pixel-space (1 unit = 1 px @ 96 dpi). Divide by 96 so
+          // the live preview reads at the same on-screen thickness the
+          // path will have once it commits — matches the panel value.
+          path.setAttribute('stroke-width', String(_penToolOpts.penStrokeWidth / 96));
+          path.setAttribute('stroke-linecap', 'round');
+          path.setAttribute('stroke-linejoin', 'round');
           _penOverlay.appendChild(path);
         }
         // Rubber-band from last node to cursor.