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