From 696e957bc2d3c8551a86d9c8e7ebf0b7c1111f11 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 22 Apr 2021 16:21:05 -0400
Subject: [PATCH] Compensate for the device pixel ratio when drawing to
 canvases

This should improve blurriness on high-DPI monitors
---
 macrovision.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/macrovision.js b/macrovision.js
index 9cae7fc5..4dde8b04 100644
--- a/macrovision.js
+++ b/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;