2

src/components/DrawingCanvas.js

@@ -6,6 +6,7 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentTool, setCurrentTool] = useState('pencil');
   const [shapes, setShapes] = useState([]);
+  const [lastPosition, setLastPosition] = useState(null);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -42,18 +43,14 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
     ctx.beginPath();
     ctx.strokeStyle = shape.color;
     ctx.lineWidth = shape.thickness;
-    
-    switch (shape.type) {
-      case 'rectangle':
-        ctx.rect(shape.x, shape.y, shape.width, shape.height);
-        break;
-      case 'circle':
-        ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
-        break;
-      default:
-        break;
+    ctx.lineCap = 'round';
+
+    if (shape.type === 'rectangle') {
+      ctx.rect(shape.x, shape.y, shape.width, shape.height);
+    } else if (shape.type === 'circle') {
+      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
     }
-    
+
     ctx.stroke();
   };
 
@@ -64,7 +61,9 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    if (currentTool === 'rectangle') {
+    if (currentTool === 'pencil') {
+      setLastPosition({ x, y });
+    } else if (currentTool === 'rectangle') {
       setShapes([...shapes, {
         type: 'rectangle',
         x,
@@ -96,33 +95,43 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
     const y = e.clientY - rect.top;
 
     if (currentTool === 'pencil') {
-      const lastX = history[history.length - 1]?.x2 || x;
-      const lastY = history[history.length - 1]?.y2 || y;
+      const lastPos = lastPosition;
       
-      setHistory([...history, {
-        type: 'draw',
-        x1: lastX,
-        y1: lastY,
-        x2: x,
-        y2: y,
-        color,
-        thickness
-      }]);
+      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
+        setHistory([...history, {
+          type: 'draw',
+          x1: lastPos.x,
+          y1: lastPos.y,
+          x2: x,
+          y2: y,
+          color,
+          thickness
+        }]);
+      }
+
+      // Update last position
+      setLastPosition({ x, y });
     } else if (currentTool === 'rectangle' || currentTool === 'circle') {
       const updatedShapes = shapes.map((shape, index) => {
         if (index === shapes.length - 1) {
+          // Update the shape dimensions
           if (currentTool === 'rectangle') {
-            return {
-              ...shape,
-              width: Math.abs(x - shape.x),
-              height: Math.abs(y - shape.y)
-            };
-          } else {
+            const width = Math.abs(x - shape.x);
+            const height = Math.abs(y - shape.y);
+            return { ...shape, width, height };
+          } else if (currentTool === 'circle') {
             const radius = Math.sqrt(Math.pow(x - shape.x, 2) + Math.pow(y - shape.y, 2));
-            return {
-              ...shape,
-              radius
-            };
+            return { ...shape, radius };
           }
         }
         return shape;
@@ -131,8 +140,31 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
     }
   };
 
+  // Separate function to handle shape drawing
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    
+    // Clear canvas and redraw all shapes
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw all shapes
+    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);
+      }
+    });
+  }, [shapes, history]);
+
   const handleMouseUp = () => {
     setIsDrawing(false);
+    // Clear last position when mouse is released
+    setLastPosition(null);
   };
 
   const handleUndo = () => {
@@ -146,13 +178,13 @@ const DrawingCanvas = ({ color, setColor, thickness, setThickness, history, setH
   };
 
   return (
-    <div className="drawing-container">
-      <canvas 
+    <div className="drawing-canvas-container">
+      <canvas
         ref={canvasRef}
+        className="drawing-canvas"
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
-        className="drawing-canvas"
       />
       <div className="toolbar">
         <button onClick={() => setCurrentTool('pencil')} className={`tool-button ${currentTool === 'pencil' ? 'active' : ''}`}>