Compensate for the device pixel ratio when drawing to canvases

This should improve blurriness on high-DPI monitors

macrovision.js

@@ -606,9 +606,13 @@ function drawRulers() {
     /** @type {CanvasRenderingContext2D} */
 
     const ctx = canvas.getContext("2d");
-    ctx.canvas.width = canvas.clientWidth;
-    ctx.canvas.height = canvas.clientHeight;
 
+    const deviceScale = window.devicePixelRatio;
+
+    ctx.canvas.width = Math.floor(canvas.clientWidth * deviceScale);
+    ctx.canvas.height = Math.floor(canvas.clientHeight * deviceScale);
+
+    ctx.scale(deviceScale, deviceScale);
     
     rulers.concat(currentRuler ? [currentRuler] : []).forEach(rulerDef => {
         ctx.save();
@@ -651,9 +655,12 @@ function drawScales(ifDirty = false) {
 
     const ctx = canvas.getContext("2d");
 
-    ctx.scale(1, 1);
-    ctx.canvas.width = canvas.clientWidth;
-    ctx.canvas.height = canvas.clientHeight;
+    const deviceScale = window.devicePixelRatio;
+
+    ctx.canvas.width = Math.floor(canvas.clientWidth * deviceScale);
+    ctx.canvas.height = Math.floor(canvas.clientHeight * deviceScale);
+
+    ctx.scale(deviceScale, deviceScale);
 
     ctx.beginPath();
     ctx.rect(0, 0, canvas.width, canvas.height);
@@ -4264,6 +4271,7 @@ function importScene(data) {
 
 function renderToCanvas() {
     const ctx = document.querySelector("#display").getContext("2d");
+
     Object.entries(entities).sort((ent1, ent2) => {
         z1 = document.querySelector("#entity-" + ent1[0]).style.zIndex;
         z2 = document.querySelector("#entity-" + ent2[0]).style.zIndex;