Canvas는 상태를 정하고 경로를 만든 뒤 픽셀로 그린다

그리기 명령의 순서와 좌표계 변환이 화면 결과에 직접 누적된다.

surface

canvas 크기

CSS 크기와 실제 drawing buffer 해상도를 맞춤

state

style·transform

색·선·좌표계 같은 현재 그리기 상태 설정

path

beginPath → 점

moveTo·lineTo·arc로 윤곽을 구성

paint

stroke / fill

현재 경로를 실제 픽셀에 반영

frame

다음 프레임

clear와 requestAnimationFrame으로 다시 그림

핵심Canvas는 DOM처럼 도형을 기억하지 않는다. 상호작용이 필요하면 객체 모델과 hit test를 별도로 관리한다.