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