캔버스 크기 맞추기
CSS 표시 크기와 width/height 픽셀 버퍼를 맞추고 devicePixelRatio를 반영해야 흐릿함을 줄입니다.
해상도컨텍스트 상태 이해
색상, 선 굵기, 변환, clipping은 context 상태로 누적되므로 save와 restore로 범위를 관리합니다.
상태프레임 다시 그리기
움직이는 장면은 clearRect 후 현재 모델 상태를 기준으로 전체 혹은 필요한 영역을 다시 그립니다.
렌더 루프이벤트 hit test
도형이 DOM이 아니므로 클릭 좌표를 모델 좌표로 변환해 어떤 객체가 눌렸는지 직접 계산합니다.
상호작용Canvas vs SVG
많은 픽셀과 빠른 재그리기는 Canvas, 개별 요소 접근은
SVG
게임, 차트 배경, 이미지 처리는 Canvas가 강하고 아이콘 편집기는
SVG가 편합니다.
선택
clear/redraw
이전 그림을 수정하는 것이 아니라 새 상태를 다시 그린다
불필요한 잔상이 남으면 clear 순서와 transform 초기화를
확인합니다.
루프
HiDPI
픽셀 버퍼를 DPR만큼 키우고 좌표계를 보정
CSS 300px 캔버스라도 내부는 600px 이상일 수 있습니다.
선명도
모델 분리 · save/restore · 애니메이션 점검
HiDPI 캔버스 초기화
const ratio = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * ratio;
canvas.height = canvas.clientHeight * ratio;
ctx.scale(ratio, ratio);