픽셀 화면은 매 프레임 다시 그립니다

Canvas는 요소를 쌓는 방식이 아니라 그리기 명령의 결과를 비트맵으로 남기므로 상태와 접근성을 따로 관리해야 한다.

단계	하는 일	핵심 코드/값	주의점
Size	CSS 크기와 실제 픽셀 크기 결정	width, height, devicePixelRatio	고해상도 화면에서 흐림
Context	그리기 도구 가져오기	getContext("2d")	컨텍스트 없음 처리 누락
State	색, 선, 폰트, 변환 설정	fillStyle, strokeStyle, transform	이전 상태가 다음 그림에 영향
Draw loop	지우고 다시 그리기	clearRect, requestAnimationFrame	불필요한 전체 redraw
Fallback	의미와 조작 보완	대체 텍스트, 별도 DOM control	캔버스 안 정보가 읽히지 않음

Canvas 품질은 그리는 코드보다 매 프레임 어떤 상태를 보관하고 무엇을 다시 그리는지가 좌우한다.