From 71a67b98547df4d7880c751aa6b0036a92ba8e55 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Sun, 1 Nov 2020 09:26:00 -0500 Subject: [PATCH] Handle devicePixelRatio for high-DPI screens --- xray.html | 1 + xray.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/xray.html b/xray.html index 70afe04..f609c5c 100644 --- a/xray.html +++ b/xray.html @@ -10,6 +10,7 @@ + diff --git a/xray.js b/xray.js index 2b7fddb..9529f78 100644 --- a/xray.js +++ b/xray.js @@ -522,14 +522,20 @@ function setup() { width = fitScreen ? Math.floor(availableWidth * scale / scaleW) : baseImg.width; height = fitScreen ? Math.floor(availableHeight * scale / scaleH) : baseImg.height; + const pixelScale = window.devicePixelRatio; [baseCtx, baseCtxResized, overlayCtx, overlayCtxResized, shadowCtx].forEach(ctx => { + ctx.canvas.style.width = width + "px"; + ctx.canvas.style.height = height + "px"; ctx.canvas.width = width; ctx.canvas.height = height; ctx.canvas.style.left = (availableWidth - width) / 2 + "px"; ctx.canvas.style.top = fitScreen ? (availableHeight - height) / 2 + "px" : 0; + ctx.canvas.width = Math.floor(width * pixelScale); + ctx.canvas.height = Math.floor(height * pixelScale); + ctx.scale(pixelScale, pixelScale); }); - + baseCtxResized.drawImage(baseImg, 0, 0, width, height); baseCtx.drawImage(baseResized, 0, 0, width, height); @@ -572,8 +578,6 @@ function updateOverlay(points, clicked) { /** @type {CanvasRenderingContext2D} */ const overlayCtx = overlay.getContext("2d"); - /** @type {CanvasRenderingContext2D} */ - const overlayCtxResized = overlay.getContext("2d"); const w = overlayCtx.canvas.width; const h = overlayCtx.canvas.height; @@ -619,7 +623,9 @@ function updateOverlay(points, clicked) { overlayCtx.globalCompositeOperation = "source-in"; - overlayCtx.drawImage(overlayResized, 0, 0); + // the resized canvas was already scaled up, so we have to compensate here + + overlayCtx.drawImage(overlayResized, 0, 0, w/window.devicePixelRatio, h/window.devicePixelRatio); overlayCtx.globalCompositeOperation = "source-over";