Switch canvas pointer events to native addEventListener

React's synthetic event system delegates to the document root, which
on iOS Safari causes pointermove passive:true to block preventDefault
and introduces timing issues that drop every other stroke.

Attaching directly to the canvas element with {passive: false} on
pointermove gives iOS the explicit signal it needs to suppress scroll
and deliver all pen events reliably.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/DrawCanvas.jsx

@@ -68,14 +68,21 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
     ];
   }, []);
 
-  const onPointerDown = useCallback((e) => {
+  // Use native addEventListener (not React synthetic events) so that
+  // passive:false works correctly on iOS Safari and events are handled
+  // directly on the canvas element rather than via document-root delegation.
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    function down(e) {
       if (e.pointerType === 'touch') return;
       isDrawingRef.current = true;
       activeStrokeRef.current = [getPoint(e)];
       render();
-  }, [getPoint, render]);
+    }
 
-  const onPointerMove = useCallback((e) => {
+    function move(e) {
       if (e.pointerType === 'touch') return;
       if (!isDrawingRef.current) return;
       e.preventDefault();
@@ -91,9 +98,9 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
           onStrokesChangeRef.current(remaining);
       }
       render();
-  }, [getPoint, render]);
+    }
 
-  const onPointerUp = useCallback((e) => {
+    function up(e) {
       if (e.pointerType === 'touch') return;
       if (!isDrawingRef.current) return;
       isDrawingRef.current = false;
@@ -102,7 +109,7 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
         onStrokesChangeRef.current([
           ...strokesRef.current,
           {
-          id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+            id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`,
             tool: drawToolRef.current,
             color: drawColorRef.current,
             size: drawSizeRef.current,
@@ -112,7 +119,19 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
       }
       activeStrokeRef.current = [];
       render();
-  }, [render]);
+    }
+
+    canvas.addEventListener('pointerdown', down);
+    canvas.addEventListener('pointermove', move, { passive: false });
+    canvas.addEventListener('pointerup', up);
+    canvas.addEventListener('pointercancel', up);
+    return () => {
+      canvas.removeEventListener('pointerdown', down);
+      canvas.removeEventListener('pointermove', move);
+      canvas.removeEventListener('pointerup', up);
+      canvas.removeEventListener('pointercancel', up);
+    };
+  }, [getPoint, render]);
 
   const undo = () => strokes.length > 0 && onStrokesChange(strokes.slice(0, -1));
   const clear = () =>
@@ -236,10 +255,6 @@ export default function DrawCanvas({ strokes, onStrokesChange, onDone, headerCon
             cursor: drawTool === 'eraser' ? 'cell' : 'crosshair',
             touchAction: 'none',
           }}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          onPointerCancel={onPointerUp}
         />
       </div>
     </div>