Canvas 기본 흐름
픽셀 화면은 매 프레임 다시 그립니다
Canvas는 DOM 요소를 쌓는 방식이 아니라, 그리기 명령의 결과를 비트맵으로 남기는 방식입니다.
1
영역 준비
<canvas> 크기와 표시 크기를 먼저 정합니다.
2
컨텍스트 획득
getContext("2d")로 그리기 도구를 가져옵니다.
3
상태 설정
색, 선 두께, 폰트, 변환 상태를 지정합니다.
4
명령 실행
clearRect 후 도형, 이미지, 텍스트를 다시 그립니다.
애니메이션requestAnimationFrame 안에서 지우고 다시 그립니다.
상호작용클릭 좌표와 직접 관리한 객체 상태를 비교합니다.
접근성캔버스 밖의 텍스트나 대체 UI로 의미를 보완합니다.