Canvas를 픽셀 렌더링 루프로 다루기

버퍼 준비

CSS 표시 크기와 devicePixelRatio를 반영해 실제 canvas 크기를 맞춘다.

색, 선, transform, clipping 상태를 그리기 전에 정한다.

path, text, image를 필요한 순서대로 그린다.

애니메이션에서는 이전 프레임을 지우고 현재 모델을 다시 렌더한다.

Immediate

그린 뒤 객체 없음 도형이 DOM 노드처럼 남지 않아 상태 모델이 필요

hit test 직접 구현

DPR

고해상도 보정 레티나 화면 흐림을 줄이기 위해 버퍼 크기 조정

좌표 scaling

RAF

프레임 동기화 브라우저 렌더 주기에 맞춰 애니메이션 갱신

비활성 탭 제한

save/restore

상태 격리 transform과 style 오염을 막음

복잡한 장면에 필수

크기 CSS 크기와 width/height buffer가 의도대로 대응한다.

초기화 프레임마다 필요한 영역을 지운다.

상태 모델 클릭 가능한 객체 좌표가 코드에서 관리된다.

접근성 중요 정보는 DOM 대안으로도 제공한다.