Allow toggling of screen-fitting

xray.html

@@ -39,6 +39,10 @@
             Paint mode:
             <input type="checkbox" id="paint-mode">
         </label>
+        <label class="nostart large">
+            Fit to screen:
+            <input type="checkbox" id="fit-screen" checked>
+        </label>
     </div>
     
     <div id="fill-div">

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