Checkpoint: Correction du problème d'affichage du canvas de signature : utilisation d'une callback ref (initCanvas) au lieu d'un useEffect conditionnel pour initialiser le fond blanc du canvas dès son montage dans le DOM

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
+  // Initialize canvas via callback ref — fires as soon as the element mounts
-  useEffect(() => {
+  const initCanvas = useCallback((canvas: HTMLCanvasElement | null) => {
-    if (mode !== "draw") return;
+    (canvasRef as React.MutableRefObject<HTMLCanvasElement | null>).current = canvas;
-    const canvas = canvasRef.current;
     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"

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