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