\n {children}\n \n

\n );\n};\n\n// HandDrawnButton component\nconst HandDrawnButton = ({ children, x, y, roughness = 1.5, onClick }) => {\n const [isHovering, setIsHovering] = useState(false);\n const buttonRef = useRef(null);\n const [buttonSize, setButtonSize] = useState({ width: 120, height: 40 });\n \n useEffect(() => {\n if (buttonRef.current) {\n // Get content size + some padding\n const rect = buttonRef.current.getBoundingClientRect();\n setButtonSize({\n width: Math.max(rect.width + 40, 120),\n height: Math.max(rect.height + 20, 40)\n });\n }\n }, [children]);\n \n const position = { x, y, width: buttonSize.width, height: buttonSize.height };\n \n return (\n setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onClick={onClick}\n >\n \n {children}\n \n \n \n );\n};\n\n// Helper function to create SVG-like rounded rectangle path\nfunction drawRoundedRectPath(x, y, width, height, radius) {\n return [\n `M${x + radius},${y}`,\n `L${x + width - radius},${y}`,\n `Q${x + width},${y},${x + width},${y + radius}`,\n `L${x + width},${y + height - radius}`,\n `Q${x + width},${y + height},${x + width - radius},${y + height}`,\n `L${x + radius},${y + height}`,\n `Q${x},${y + height},${x},${y + height - radius}`,\n `L${x},${y + radius}`,\n `Q${x},${y},${x + radius},${y}`,\n 'Z'\n ].join(' ');\n}\n\n// Main app component\nfunction App() {\n const canvasRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });\n const [drawings, setDrawings] = useState({});\n const [message, setMessage] = useState(\"\");\n \n // Handle window resize\n useEffect(() => {\n const handleResize = () => {\n setDimensions({ width: window.innerWidth, height: window.innerHeight });\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n \n // Drawing context functions\n const addDrawing = (id, drawingData) => {\n setDrawings(prev => ({ ...prev, [id]: drawingData }));\n };\n \n const removeDrawing = (id) => {\n setDrawings(prev => {\n const newDrawings = { ...prev };\n delete newDrawings[id];\n return newDrawings;\n });\n };\n \n // Render canvas when dimensions or drawings change\n useEffect(() => {\n if (!canvasRef.current) return;\n \n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n const rc = new RoughCanvas(canvas);\n \n // Clear the canvas\n ctx.clearRect(0, 0, dimensions.width, dimensions.height);\n \n // Draw header line\n rc.line(0, 50, dimensions.width, 50, { \n roughness: 2, \n strokeWidth: 2,\n bowing: 3\n });\n \n // Draw site title\n ctx.font = '30px \"Nanum Pen Script\", cursive';\n ctx.fillText('Rough.js UI Demo', 20, 35);\n \n // Draw all registered elements\n Object.values(drawings).forEach(drawing => {\n const { type, position, roughness, isHovering } = drawing;\n const { x, y, width, height } = position;\n \n if (type === 'card') {\n const cardPath = drawRoundedRectPath(x, y, width, height, 15);\n rc.path(cardPath, { \n fill: 'rgba(255, 255, 255, 0.5)', \n fillStyle: 'hachure', \n roughness: roughness,\n stroke: 'black',\n strokeWidth: 2,\n hachureAngle: 60,\n hachureGap: 8\n });\n } else if (type === 'button') {\n const buttonPath = drawRoundedRectPath(x, y, width, height, 10);\n rc.path(buttonPath, { \n fill: isHovering ? 'rgba(220, 220, 220, 0.8)' : 'rgba(200, 200, 200, 0.7)', \n fillStyle: 'zigzag', \n roughness: roughness,\n stroke: 'black',\n strokeWidth: 2\n });\n }\n });\n \n }, [dimensions, drawings]);\n \n return (\n \n

Hand-Drawn UI Elements