Canvas는 명령 순서대로 픽셀을 쌓는다
Canvas는 DOM 요소 배치가 아니라 즉시 모드 그리기 API다. context, state, path, draw 순서를 분리해야 그림이 예측 가능하다.
| 단계 | 역할 | 대표 API | 확인할 것 |
|---|---|---|---|
| context | 그릴 대상과 좌표계 확보 | getContext, width/height | CSS 크기와 버퍼 크기 |
| state | 색·선·폰트·변환 설정 | fillStyle, lineWidth, save | 상태가 누적되는지 |
| path | 그릴 경로 구성 | beginPath, moveTo, lineTo | 이전 path가 섞이지 않는지 |
| draw | 픽셀 버퍼에 출력 | stroke, fill, drawImage | 그린 뒤 DOM처럼 수정 불가 |
Canvas 버그는 대개 그리기 명령 자체보다 상태와 path가 언제 초기화되는지에서 생긴다.