dwd
/
drawing-web-app-react
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

5

main
Kar l5win 2025-07-07 23:48:15 -07:00
parent 84ee8cfaec
commit 99d0108652
1 changed files with 9 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/DrawingCanvas.js
View File

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