Fit the canvases to the current screen size

This also pre-resizes the images, since doing that is more expensive than
drawing the images normally.

xray.css

@@ -1,5 +1,10 @@
-body {
+html, body {
     font-family: sans-serif;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
 }
 
 canvas {
@@ -20,9 +25,12 @@ img {
 
 #menu {
     display: flex;
+    flex: 0 1;
     flex-direction: row;
     transition: 0.5s;
     flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
 }
 
 #menu.start input,
@@ -44,3 +52,8 @@ img {
 .large > input[type=number] {
     max-width: 72pt;
 }
+
+#fill-div {
+    position: relative;
+    flex: 1 0;
+}

xray.html

@@ -35,8 +35,12 @@
         </label>
     </div>
     
-    <canvas class="hidden" id="overlay"></canvas>
-    <canvas class="hidden" id="base"></canvas>
+    <div id="fill-div">
+        <canvas class="hidden" id="overlay-resized"></canvas>
+        <canvas class="hidden" id="overlay"></canvas>
+        <canvas class="hidden" id="base-resized"></canvas>
+        <canvas class="hidden" id="base"></canvas>
+    </div>
     <img id="overlay-img" src="overlay.png">
     <img id="base-img" src="base.png">
 </body>

xray.js

@@ -3,9 +3,16 @@
 let overlayLoaded = false;
 let baseLoaded = false;
 
+let running = false;
+
 let radius = 200;
 let softness = 25;
 
+let width;
+let height;
+
+let scale;
+
 document.addEventListener("DOMContentLoaded", e => {
     document.querySelector("#load-button").addEventListener("click", e => {
         console.log("Trying to load...");
@@ -199,6 +206,12 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That was a bogus softness...");
         }
     }
+
+    window.addEventListener("resize", e => {
+        if (running) {
+            setup();
+        }
+    })
     
 });
 
@@ -230,8 +243,12 @@ function load() {
 }
 
 function setup() {
+    running = true;
+
     const overlay = document.querySelector("#overlay");
     const base = document.querySelector("#base");
+    const overlayResized = document.querySelector("#overlay-resized");
+    const baseResized = document.querySelector("#base-resized");
 
     overlay.classList.remove("hidden");
     base.classList.remove("hidden");
@@ -243,23 +260,46 @@ function setup() {
     const overlayCtx = overlay.getContext("2d");
     /** @type {CanvasRenderingContext2D} */
     const baseCtx = base.getContext("2d");
+    /** @type {CanvasRenderingContext2D} */
+    const overlayCtxResized = overlayResized.getContext("2d");
+    /** @type {CanvasRenderingContext2D} */
+    const baseCtxResized = baseResized.getContext("2d");
 
-    baseCtx.canvas.width = baseImg.width;
-    baseCtx.canvas.height = baseImg.height;
+    const availableWidth = document.querySelector("#fill-div").getBoundingClientRect().width;
+    const availableHeight = document.querySelector("#fill-div").getBoundingClientRect().height;
+
+    const scaleW = availableWidth / baseImg.width;
+    const scaleH = availableHeight / baseImg.height;
+    scale = Math.min(scaleW, scaleH);
+
+    const width = availableWidth * scale / scaleW;
+    const height = availableHeight * scale / scaleH;
+
+    [baseCtx, baseCtxResized, overlayCtx, overlayCtxResized].forEach(ctx => {
+        console.log(ctx.canvas)
+        ctx.canvas.width = width;
+        ctx.canvas.height = height;
+        ctx.canvas.style.left = (availableWidth - width) / 2 + "px";
+        ctx.canvas.style.top = (availableHeight - height) / 2 + "px";
+    });
     
-    baseCtx.drawImage(baseImg, 0, 0);
+    baseCtxResized.drawImage(baseImg, 0, 0, width, height);
+    baseCtx.drawImage(baseResized, 0, 0, width, height);
+
+    overlayCtxResized.drawImage(overlayImg, 0, 0, width, height);
 
-    overlayCtx.canvas.width = overlayImg.width;
-    overlayCtx.canvas.height = overlayImg.height;
     console.log("Done");
 }
 
 function updateOverlay(points) {
 
+    const overlay = document.querySelector("#overlay");
+    const overlayResized = document.querySelector("#overlay-resized");
+
     /** @type {CanvasRenderingContext2D} */
     const overlayCtx = overlay.getContext("2d");
-
-    const overlayImg = document.querySelector("#overlay-img");
+    /** @type {CanvasRenderingContext2D} */
+    const overlayCtxResized = overlay.getContext("2d");
 
     const w = overlayCtx.canvas.width;
     const h = overlayCtx.canvas.height;
@@ -273,9 +313,9 @@ function updateOverlay(points) {
     points.forEach(point => {
         const [x,y] = point;
         overlayCtx.beginPath();
-        overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI);
+        overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
     
-        const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius);
+        const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, Math.floor(radius * scale));
         gradient.addColorStop((100-softness)/100, '#000000FF');
         gradient.addColorStop(1, '#00000000');
         overlayCtx.fillStyle = gradient;
@@ -286,7 +326,7 @@ function updateOverlay(points) {
 
     overlayCtx.globalCompositeOperation = "source-in";
 
-    overlayCtx.drawImage(overlayImg, 0, 0);
+    overlayCtx.drawImage(overlayResized, 0, 0);
 
     overlayCtx.restore();
 }