From cf886a1adb751d850bc36151e7fb6679972d4cf5 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Sat, 14 Mar 2026 19:13:45 -0400
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Correction=20du=20probl=C3=A8me?=
 =?UTF-8?q?=20d'affichage=20du=20canvas=20de=20signature=20:=20utilisation?=
 =?UTF-8?q?=20d'une=20callback=20ref=20(initCanvas)=20au=20lieu=20d'un=20u?=
 =?UTF-8?q?seEffect=20conditionnel=20pour=20initialiser=20le=20fond=20blan?=
 =?UTF-8?q?c=20du=20canvas=20d=C3=A8s=20son=20montage=20dans=20le=20DOM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/Settings.tsx | 11 +++++------
 todo.md                       |  6 +++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

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<HTMLCanvasElement | null>).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<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>, canvas: HTMLCanvasElement) => {
     const rect = canvas.getBoundingClientRect();
@@ -269,7 +268,7 @@ function SignaturesSection() {
                 <Label className="font-medium">Dessinez votre signature ci-dessous</Label>
                 <div className="relative rounded-lg border-2 border-slate-300 bg-white overflow-hidden" style={{ touchAction: "none" }}>
                   <canvas
-                    ref={canvasRef}
+                    ref={initCanvas}
                     width={600}
                     height={180}
                     className="w-full cursor-crosshair block"
diff --git a/todo.md b/todo.md
index bbdcb4b..c31b1a5 100644
--- a/todo.md
+++ b/todo.md
@@ -526,4 +526,8 @@
 - [x] Gérer les événements souris (mousedown, mousemove, mouseup) et tactile (touch)
 - [x] Ajouter un bouton "Effacer" pour réinitialiser le canvas
 - [x] Exporter le canvas en PNG base64 pour l'upload
-- [ ] Tester le dessin à la souris et l'enregistrement
+- [x] Tester le dessin à la souris et l'enregistrement
+
+## Correction affichage canvas signature
+- [x] Corriger le problème d'initialisation du canvas (fond blanc non affiché)
+- [x] S'assurer que le canvas est visible et fonctionnel dans l'onglet Signatures