Respond to touch events

xray.js

@@ -52,13 +52,27 @@ function setup() {
     overlay.addEventListener("mousemove", e => {
         let x = e.clientX - e.target.getBoundingClientRect().x;
         let y = e.clientY - e.target.getBoundingClientRect().y;
-        updateOverlay(x, y);
+        updateOverlay([[x,y]]);
+    });
+
+    overlay.addEventListener("touchmove", e => {
+        let offsetX = e.target.getBoundingClientRect().x;
+        let offsetY = e.target.getBoundingClientRect().y;
+
+        let touches = [];
+        
+        for (let i=0; i < e.touches.length; i++) {
+            let x = e.touches[i].clientX - offsetX;
+            let y = e.touches[i].clientY - offsetY;
+            touches.push([x,y]);
+        }
+        updateOverlay(touches);
     });
 
     console.log("Done");
 }
 
-function updateOverlay(x, y) {
+function updateOverlay(points) {
     console.log("MOVE")
 
     /** @type {CanvasRenderingContext2D} */
@@ -75,15 +89,19 @@ function updateOverlay(x, y) {
     overlayCtx.globalCompositeOperation = "source-over";
     overlayCtx.clearRect(0, 0, w, h);
 
-    overlayCtx.beginPath();
-    overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI);
-
-    const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius);
-    gradient.addColorStop(0.75, '#000000FF');
-    gradient.addColorStop(1, '#00000000');
-    overlayCtx.fillStyle = gradient;
-
-    overlayCtx.fill();
+    points.forEach(point => {
+        const [x,y] = point;
+        overlayCtx.beginPath();
+        overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI);
+    
+        const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius);
+        gradient.addColorStop(0.75, '#000000FF');
+        gradient.addColorStop(1, '#00000000');
+        overlayCtx.fillStyle = gradient;
+    
+        overlayCtx.fill();
+    })
+    
 
     overlayCtx.globalCompositeOperation = "source-in";