[V0_FILE]typescriptreact:file="CorrectedPaintApp.tsx" type="react-project" project="Corrected Classic MS Paint Clone" import React, { useRef, useState, useEffect } from 'react'; import { Button } from "@/components/ui/button" const colors = [ '#000000', '#808080', '#800000', '#808000', '#008000', '#008080', '#000080', '#800080', '#808040', '#004040', '#0080FF', '#004080', '#8000FF', '#804000', '#FFFFFF', '#C0C0C0', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#FFFF80', '#00FF80', '#80FFFF', '#8080FF', '#FF0080', '#FF8040' ]; export default function Component() { const canvasRef = useRef(null); const containerRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [color, setColor] = useState('#000000'); const [tool, setTool] = useState('brush'); const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); useEffect(() => { const canvas = canvasRef.current; const context = canvas?.getContext('2d'); if (context) { context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, canvas.width, canvas.height); } }, []); const startDrawing = (e: React.MouseEvent) => { const canvas = canvasRef.current; const context = canvas?.getContext('2d'); if (context) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; context.beginPath(); context.moveTo(x, y); setIsDrawing(true); } }; const draw = (e: React.MouseEvent) => { if (!isDrawing) return; const canvas = canvasRef.current; const context = canvas?.getContext('2d'); if (context) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; context.lineTo(x, y); context.strokeStyle = tool === 'eraser' ? '#FFFFFF' : color; context.lineWidth = tool === 'eraser' ? 20 : 2; context.lineCap = 'round'; context.stroke(); } }; const stopDrawing = () => { setIsDrawing(false); }; const startDragging = (e: React.MouseEvent) => { setDragging(true); setPosition({ x: e.clientX - (containerRef.current?.offsetLeft || 0), y: e.clientY - (containerRef.current?.offsetTop || 0) }); }; const onDrag = (e: React.MouseEvent) => { if (dragging) { const left = e.clientX - position.x; const top = e.clientY - position.y; if (containerRef.current) { containerRef.current.style.left = `${left}px`; containerRef.current.style.top = `${top}px`; } } }; const stopDragging = () => { setDragging(false); }; return (

untitled - Paint

File Edit View Image Options Help

{colors.map((c) => (

For Help, click Help Topics on the Help Menu.

); }

About

About