Add an optional border

xray.html

@@ -33,6 +33,10 @@
             <input type="range" id="softness-slider" min="0" max="100" value="25">
         </label>
         <button class="nostart large" id="fullscreen-button">Fullscreen</button>
+        <label class="nostart large">
+            Border:
+            <input type="checkbox" id="show-border">
+        </label>
         <label class="nostart large">
             Paint mode:
             <input type="checkbox" id="paint-mode">

xray.js

@@ -11,6 +11,7 @@ let softness = 25;
 let width;
 let height;
 
+let border = false;
 let fitScreen = true;
 let paintMode = false;
 
@@ -261,6 +262,14 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That was a bogus softness...");
         }
     }
+    if (url.searchParams.has("border")) {
+        try {
+            border = 1 == parseInt(url.searchParams.get("border"));
+            document.querySelector("#show-border").checked = border;
+        } catch {
+            console.warn("That was a bogus softness...");
+        }
+    }
 
     window.addEventListener("resize", e => {
         if (running) {
@@ -283,6 +292,11 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     });
     
+    document.querySelector("#show-border").addEventListener("change", e => {
+        border = e.target.checked;
+        setURL();
+    });
+    
     document.querySelector("#paint-mode").addEventListener("change", e => {
         paintMode = e.target.checked;
     });
@@ -439,6 +453,22 @@ function updateOverlay(points, clicked) {
 
     overlayCtx.drawImage(overlayResized, 0, 0);
 
+    
+    overlayCtx.globalCompositeOperation = "source-over";
+
+
+    if (!paintMode && border) {
+        points.forEach(point => {
+            const [x, y] = point;
+
+            overlayCtx.strokeStyle = "#000";
+            overlayCtx.lineWidth = 3;
+            overlayCtx.beginPath();
+            overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
+            overlayCtx.stroke();
+        });
+    }
+
     overlayCtx.restore();
 }
 
@@ -469,5 +499,9 @@ function setURL() {
         shareURL.searchParams.append("radius", radius);
         shareURL.searchParams.append("softness", softness);
 
+        if (border) {
+            shareURL.searchParams.append("border", 1);
+        }
+
         window.history.replaceState(null, "X-Ray Viewer", shareURL);
 }