Snap to device pixel grid instead of plain rounding to reduce more cases of blur

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`;