Web Basic · Canvas

Canvas 2D 렌더링 루프

Canvas는 DOM 요소를 배치하는 방식이 아니라, 픽셀 버퍼에 직접 그리는 즉시 모드 그래픽 API라서 상태 관리와 다시 그리기 전략이 중요하다.

01

캔버스 준비

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

02

상태 설정

색, 선 굵기, transform, clipping 같은 그리기 상태를 설정한다.

03

그리기

좌표 계산 후 path, text, image를 순서대로 그린다.

04

프레임 갱신

애니메이션은 이전 프레임을 지우고 현재 상태를 다시 그린다.

Immediate

직접 그리기 그린 도형은 DOM 노드처럼 남아 있지 않음

상태 모델을 별도로 보관

DPR

고해상도 보정 레티나 화면에서 흐림 방지

좌표 scaling 필요

RAF

브라우저 프레임 동기화 requestAnimationFrame으로 부드럽게 갱신

비활성 탭에서는 제한

Hit test

직접 충돌 판정 클릭 위치와 도형 좌표를 코드로 비교

접근성 대안 필요

크기 · 초기화 · 상태 저장 점검

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

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

상태 저장 save/restore로 transform과 style 오염을 막는다.

접근성 텍스트나 인터랙션 정보를 DOM 대안으로 제공한다.