From ca02d84ca47b4f313b93bc1b3bd758e505c19ab4 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Sun, 26 Apr 2026 15:24:06 -0500
Subject: [PATCH] Snap to device pixel grid instead of plain rounding to reduce
 more cases of blur

---
 src/scaffolding/scaffolding.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/scaffolding/scaffolding.js b/src/scaffolding/scaffolding.js
index 746e75c..a48a55e 100644
--- a/src/scaffolding/scaffolding.js
+++ b/src/scaffolding/scaffolding.js
@@ -292,15 +292,16 @@ class Scaffolding extends EventTarget {
       }
     }
 
-    // Prevent blurriness due to decimal dimensions. The canvas can only take integer dimensions, but CSS lets us apply decimal
-    // dimensions. If we do that, the browser will try to stretch the canvas a tiny bit, resulting in the blur.
-    width = Math.round(width);
-    height = Math.round(height);
+    // Snap dimensions to the device-pixel grid so the canvas drawing buffer and CSS box size match exactly, avoiding any blur.
+    const dpr = window.devicePixelRatio || 1;
+    const snap = (value) => Math.round(value * dpr) / dpr;
 
+    width = snap(width);
+    height = snap(height);
     const distanceFromTop = totalHeight - height;
     const distanceFromLeft = totalWidth - width;
-    const translateY = (distanceFromLeft - offsetFromLeft - offsetFromRight) / 2 + offsetFromLeft - (distanceFromLeft / 2);
-    const translateX = (distanceFromTop - offsetFromTop - offsetFromBottom) / 2 + offsetFromTop - (distanceFromTop / 2);
+    const translateY = snap((distanceFromLeft - offsetFromLeft - offsetFromRight) / 2 + offsetFromLeft - (distanceFromLeft / 2));
+    const translateX = snap((distanceFromTop - offsetFromTop - offsetFromBottom) / 2 + offsetFromTop - (distanceFromTop / 2));
 
     this._layers.style.transform = `translate(${translateY}px, ${translateX}px)`;
     this._layers.style.width = `${width}px`;