diff --git a/client/src/pages/Settings.tsx b/client/src/pages/Settings.tsx index 4d78529..903e78c 100644 --- a/client/src/pages/Settings.tsx +++ b/client/src/pages/Settings.tsx @@ -46,10 +46,9 @@ function SignaturesSection() { const isDrawingRef = useRef(false); const lastPosRef = useRef<{ x: number; y: number } | null>(null); - // Initialize canvas - useEffect(() => { - if (mode !== "draw") return; - const canvas = canvasRef.current; + // Initialize canvas via callback ref — fires as soon as the element mounts + const initCanvas = useCallback((canvas: HTMLCanvasElement | null) => { + (canvasRef as React.MutableRefObject).current = canvas; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; @@ -59,7 +58,7 @@ function SignaturesSection() { ctx.lineWidth = 2; ctx.lineCap = "round"; ctx.lineJoin = "round"; - }, [mode]); + }, []); const getPos = useCallback((e: React.MouseEvent | React.TouchEvent, canvas: HTMLCanvasElement) => { const rect = canvas.getBoundingClientRect(); @@ -269,7 +268,7 @@ function SignaturesSection() {