KNOW-HOW/Canvas

[ Drawing Lines & Paths ]

Canvas를 활용한 작업을 할 때는 반드시 DOM에 canvas가 렌더링 된 이후이어야 한다. javascript를 사용중이라면 onLoad 이후, react를 사용중이라면 useEffect에서 canvas 작업을 진행해야 한다. 1. Draw Lines export const First = () => { // definition const canvasRef = useRef(null); useEffect(() => { const context = canvasRef.current?.getContext("2d"); if (!context) return; context.clearRect(0, 0, 800, 600); context.fillStyle = "blue"; context.fillRect(10, 40..