From 10d08e520f1435f602645927ef2ad207bac56ccc Mon Sep 17 00:00:00 2001
From: Daniel Woelfel <dwwoelfel@gmail.com>
Date: Fri, 6 Mar 2026 07:18:59 -0800
Subject: [PATCH] Handle iOS pointer capture failures on drawing canvas

---
 src/app/new/page.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/new/page.tsx b/src/app/new/page.tsx
index 8cad6fb..c56cff5 100644
--- a/src/app/new/page.tsx
+++ b/src/app/new/page.tsx
@@ -120,6 +120,30 @@ function DrawCanvas({
   const finishedRef = useRef(false);
   const streamActiveRef = useRef(false);
 
+  const safelySetPointerCapture = useCallback(
+    (target: HTMLCanvasElement, pointerId: number) => {
+      if (!('setPointerCapture' in target)) return;
+      try {
+        target.setPointerCapture(pointerId);
+      } catch {
+        // iOS Safari can throw for touch pointers when capture isn't available.
+      }
+    },
+    [],
+  );
+
+  const safelyReleasePointerCapture = useCallback(
+    (target: HTMLCanvasElement, pointerId: number) => {
+      if (!('releasePointerCapture' in target)) return;
+      try {
+        target.releasePointerCapture(pointerId);
+      } catch {
+        // Ignore missing/stale capture state.
+      }
+    },
+    [],
+  );
+
   // Drawing hook
   const drawing = useDrawingCanvas({
     userId,
@@ -536,12 +560,12 @@ function DrawCanvas({
           className="w-full cursor-crosshair"
           style={{ touchAction: 'none', backgroundColor: drawing.bgColor }}
           onPointerDown={(e) => {
-            e.currentTarget.setPointerCapture(e.pointerId);
+            safelySetPointerCapture(e.currentTarget, e.pointerId);
             drawing.handlePointerDown(e);
           }}
           onPointerMove={drawing.handlePointerMove}
           onPointerUp={(e) => {
-            e.currentTarget.releasePointerCapture(e.pointerId);
+            safelyReleasePointerCapture(e.currentTarget, e.pointerId);
             drawing.handlePointerUp(e);
           }}
         />