Add an option to darken the base image

xray.css

@@ -27,7 +27,7 @@ img {
 }
 
 #overlay {
-    z-index: 1;
+    z-index: 2;
 }
 
 #menu {
@@ -90,4 +90,10 @@ img {
 #fill-div {
     position: relative;
     flex: 1 0;
+}
+
+#shadow {
+    --opacity: 0;
+    opacity: var(--opacity);
+    z-index: 1;
 }

xray.html

@@ -45,14 +45,20 @@
             Fit to screen:
             <input type="checkbox" id="fit-screen" checked>
         </label>
+        <label class="nostart large">
+            Darkness:
+            <input type="number" id="darkness-input" placeholder="0" value="0">
+            <input type="range" id="darkness-slider" min="0" max="100" value="0">
+        </label>
         <a id="artist" target="_blank" class="nostart large"><button>Visit artist</button></a>
     </div>
     
     <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="shadow"></canvas>
         <canvas class="hidden" id="base"></canvas>
+        <canvas class="hidden" id="overlay-resized"></canvas>
+        <canvas class="hidden" id="base-resized"></canvas>
     </div>
     <img id="overlay-img" src="overlay.png">
     <img id="base-img" src="base.png">

xray.js

@@ -7,6 +7,7 @@ let running = false;
 
 let radius = 200;
 let softness = 0;
+let darkness = 0;
 
 let width;
 let height;
@@ -14,6 +15,7 @@ let height;
 let border = true;
 let fitScreen = true;
 let paintMode = false;
+let shadow = true;
 
 let firstTime = true;
 
@@ -198,6 +200,48 @@ document.addEventListener("DOMContentLoaded", e => {
         }
         setURL();
     });
+    
+    document.querySelector("#darkness-slider").addEventListener("input", e => {
+        try {
+            darkness = parseInt(e.target.value);
+            document.querySelector("#darkness-input").value = darkness;
+            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+        } catch {
+            console.warn("That wasn't a valid darkness: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#darkness-slider").addEventListener("change", e => {
+        try {
+            darkness = parseInt(e.target.value);
+            document.querySelector("#darkness-input").value = darkness;
+            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+        } catch {
+            console.warn("That wasn't a valid darkness: " + e.target.value);
+        }
+        setURL();
+    });
+    
+    document.querySelector("#darkness-input").addEventListener("input", e => {
+        try {
+            darkness = parseInt(e.target.value);
+            document.querySelector("#darkness-slider").value = darkness;
+            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+        } catch {
+            console.warn("That wasn't a valid darkness: " + e.target.value);
+        }
+    });
+    
+    document.querySelector("#darkness-input").addEventListener("change", e => {
+        try {
+            darkness = parseInt(e.target.value);
+            document.querySelector("#darkness-slider").value = darkness;
+            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+        } catch {
+            console.warn("That wasn't a valid darkness: " + e.target.value);
+        }
+        setURL();
+    });
 
     // see if we have params already; if so, use them!
 
@@ -265,6 +309,17 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That was a bogus softness...");
         }
     }
+    if (url.searchParams.has("darkness")) {
+        try {
+            darkness = parseInt(url.searchParams.get("darkness"));
+            document.querySelector("#darkness-slider").value = darkness;
+            document.querySelector("#darkness-input").value = darkness;
+            document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100);
+        } catch {
+            console.warn("That was a bogus darkness...");
+        }
+    }
+
     if (url.searchParams.has("border")) {
         try {
             border = 1 == parseInt(url.searchParams.get("border"));
@@ -361,10 +416,14 @@ function setup() {
 
     const overlay = document.querySelector("#overlay");
     const base = document.querySelector("#base");
+
     const overlayResized = document.querySelector("#overlay-resized");
     const baseResized = document.querySelector("#base-resized");
 
+    const shadow = document.querySelector("#shadow");
+
     overlay.classList.remove("hidden");
+    shadow.classList.remove("hidden");
     base.classList.remove("hidden");
 
     const overlayImg = document.querySelector("#overlay-img");
@@ -375,6 +434,8 @@ function setup() {
     /** @type {CanvasRenderingContext2D} */
     const baseCtx = base.getContext("2d");
     /** @type {CanvasRenderingContext2D} */
+    const shadowCtx = shadow.getContext("2d");
+    /** @type {CanvasRenderingContext2D} */
     const overlayCtxResized = overlayResized.getContext("2d");
     /** @type {CanvasRenderingContext2D} */
     const baseCtxResized = baseResized.getContext("2d");
@@ -389,7 +450,7 @@ function setup() {
     width = fitScreen ? Math.floor(availableWidth * scale / scaleW) : baseImg.width;
     height = fitScreen ? Math.floor(availableHeight * scale / scaleH) : baseImg.height;
 
-    [baseCtx, baseCtxResized, overlayCtx, overlayCtxResized].forEach(ctx => {
+    [baseCtx, baseCtxResized, overlayCtx, overlayCtxResized, shadowCtx].forEach(ctx => {
         ctx.canvas.width = width;
         ctx.canvas.height = height;
         ctx.canvas.style.left = fitScreen ? (availableWidth - width) / 2 + "px" : 0;
@@ -401,6 +462,10 @@ function setup() {
 
     overlayCtxResized.drawImage(overlayImg, 0, 0, width, height);
 
+    shadowCtx.fillStyle = "black";
+    shadowCtx.fillRect(0, 0, width, height);
+
+
     // if we're starting fresh, set the radius value to be a fraction of the image size
 
     if (firstTime) {
@@ -517,6 +582,7 @@ function setURL() {
         
         shareURL.searchParams.append("radius", radius);
         shareURL.searchParams.append("softness", softness);
+        shareURL.searchParams.append("darkness", darkness);
 
         if (border) {
             shareURL.searchParams.append("border", 1);