diff --git a/xray.html b/xray.html index c810504..5774d0c 100644 --- a/xray.html +++ b/xray.html @@ -39,6 +39,10 @@ Paint mode: +
diff --git a/xray.js b/xray.js index a872ff1..50d8dd0 100644 --- a/xray.js +++ b/xray.js @@ -11,6 +11,7 @@ let softness = 25; let width; let height; +let fitScreen = true; let paintMode = false; let scale; @@ -255,6 +256,11 @@ document.addEventListener("DOMContentLoaded", e => { document.querySelector("#paint-mode").addEventListener("change", e => { paintMode = e.target.checked; }); + + document.querySelector("#fit-screen").addEventListener("change", e => { + fitScreen = e.target.checked; + setup(); + }); }); function load() { @@ -327,16 +333,16 @@ function setup() { const scaleW = availableWidth / baseImg.width; const scaleH = availableHeight / baseImg.height; - scale = Math.min(scaleW, scaleH); + scale = fitScreen ? Math.min(scaleW, scaleH) : 1; - width = Math.floor(availableWidth * scale / scaleW); - height = Math.floor(availableHeight * scale / scaleH); + width = fitScreen ? Math.floor(availableWidth * scale / scaleW) : baseImg.width; + height = fitScreen ? Math.floor(availableHeight * scale / scaleH) : baseImg.height; [baseCtx, baseCtxResized, overlayCtx, overlayCtxResized].forEach(ctx => { ctx.canvas.width = width; ctx.canvas.height = height; - ctx.canvas.style.left = (availableWidth - width) / 2 + "px"; - ctx.canvas.style.top = (availableHeight - height) / 2 + "px"; + ctx.canvas.style.left = fitScreen ? (availableWidth - width) / 2 + "px" : 0; + ctx.canvas.style.top = fitScreen ? (availableHeight - height) / 2 + "px" : 0; }); baseCtxResized.drawImage(baseImg, 0, 0, width, height);