5

src/components/DrawingCanvas.js

@@ -44,7 +44,7 @@ const DrawingCanvas = () => {
     
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
-    
+
     // Set initial canvas size
     canvas.width = window.innerWidth - 300;
     canvas.height = window.innerHeight - 100;
@@ -64,16 +64,13 @@ const DrawingCanvas = () => {
       }
     });
 
-    shapes.forEach((shape) => {
-      drawShape(ctx, shape);
-    });
-
-    // Draw history (for pencil drawing)
-    history.forEach((action) => {
-      if (action.type === 'draw') {
-        drawLine(ctx, action.x1, action.y1, action.x2, action.y2, action.color, action.thickness);
-      }
-    });
+    // Force a re-render to ensure everything is drawn
+    if (canvas) {
+      canvas.style.display = 'none';
+      // Trigger reflow by forcing layout calculation
+      const width = canvas.offsetWidth;
+      canvas.style.display = 'block';
+    }
   }, [history, shapes]);
 
   const handleMouseDown = (e) => {
@@ -111,7 +108,6 @@ const DrawingCanvas = () => {
     if (!isDrawing) return;
     
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
@@ -120,16 +116,7 @@ const DrawingCanvas = () => {
       const lastPos = lastPosition;
       
       if (lastPos) {
-        // Draw the line immediately
-        ctx.beginPath();
-        ctx.moveTo(lastPos.x, lastPos.y);
-        ctx.lineTo(x, y);
-        ctx.strokeStyle = color;
-        ctx.lineWidth = thickness;
-        ctx.lineCap = 'round';
-        ctx.stroke();
-
-        // Update history
+        // Don't draw immediately, just update history
         setHistory(prevHistory => [...prevHistory, {
           type: 'draw',
           x1: lastPos.x,