Add an offset mode for mobile

xray.html

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

xray.js

@@ -16,6 +16,7 @@ let height;
 let border = true;
 let fitScreen = true;
 let paintMode = false;
+let offsetMode = false;
 let shadow = true;
 
 let firstTime = true;
@@ -416,6 +417,10 @@ document.addEventListener("DOMContentLoaded", e => {
         paintMode = e.target.checked;
     });
     
+    document.querySelector("#offset-mode").addEventListener("change", e => {
+        offsetMode = e.target.checked;
+    });
+    
     document.querySelector("#fit-screen").addEventListener("change", e => {
         fitScreen = e.target.checked;
         setup();
@@ -569,7 +574,12 @@ function updateOverlay(points, clicked) {
 
     if (!paintMode || clicked) {
         points.forEach(point => {
-            const [x,y] = point;
+            let [x,y] = point;
+
+            if (offsetMode) {
+                y -= radius * scale * 1.2;
+            }
+
             overlayCtx.beginPath();
             overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
         
@@ -603,7 +613,11 @@ function updateOverlay(points, clicked) {
 
     if (!paintMode && border) {
         points.forEach(point => {
-            const [x, y] = point;
+            let [x, y] = point;
+
+            if (offsetMode) {
+                y -= radius * scale * 1.2;
+            }
 
             overlayCtx.strokeStyle = "#000";
             overlayCtx.lineWidth = 3;