Update static/script.js

static/script.js

@@ -18,9 +18,14 @@ function resizeCanvases() {
   backgroundCanvas.height = height;
   drawingCanvas.width = width;
   drawingCanvas.height = height;
+
+  // Redraw the background canvas after resizing
+  redrawWhiteboard([]);
 }
 
+// Call resizeCanvases initially and add event listener
 resizeCanvases();
+window.addEventListener("resize", resizeCanvases);
 
 const ws = new WebSocket(`ws://${window.location.host}/ws`);
 
@@ -62,6 +67,11 @@ drawingCanvas.addEventListener("mousemove", draw);
 drawingCanvas.addEventListener("mouseup", stopDrawing);
 drawingCanvas.addEventListener("mouseout", stopDrawing);
 
+// Touch event listeners for mobile support
+drawingCanvas.addEventListener("touchstart", handleTouchStart);
+drawingCanvas.addEventListener("touchmove", handleTouchMove);
+drawingCanvas.addEventListener("touchend", handleTouchEnd);
+
 function startDrawing(e) {
   isDrawing = true;
   currentPath = [];
@@ -103,17 +113,58 @@ function stopDrawing() {
 
 function getPoint(e) {
   const rect = drawingCanvas.getBoundingClientRect();
+  const x = e.clientX || e.touches[0].clientX;
+  const y = e.clientY || e.touches[0].clientY;
   return {
-    x: e.clientX - rect.left,
-    y: e.clientY - rect.top,
+    x: x - rect.left,
+    y: y - rect.top,
   };
 }
 
+function handleTouchStart(e) {
+  e.preventDefault();
+  startDrawing(e.touches[0]);
+}
+
+function handleTouchMove(e) {
+  e.preventDefault();
+  draw(e.touches[0]);
+}
+
+function handleTouchEnd(e) {
+  e.preventDefault();
+  stopDrawing();
+}
+
 clearBtn.addEventListener("click", () => {
   ws.send(JSON.stringify({ Clear: null }));
 });
 
-window.addEventListener("resize", () => {
-  resizeCanvases();
-  redrawWhiteboard([]);
-});
+// Prevent scrolling when touching the canvas
+document.body.addEventListener(
+  "touchstart",
+  function (e) {
+    if (e.target == drawingCanvas) {
+      e.preventDefault();
+    }
+  },
+  { passive: false },
+);
+document.body.addEventListener(
+  "touchend",
+  function (e) {
+    if (e.target == drawingCanvas) {
+      e.preventDefault();
+    }
+  },
+  { passive: false },
+);
+document.body.addEventListener(
+  "touchmove",
+  function (e) {
+    if (e.target == drawingCanvas) {
+      e.preventDefault();
+    }
+  },
+  { passive: false },
+);