Canvas 고해상도 크기 설정

CSS로 보이는 캔버스 크기와 width, height 속성의 드로잉 버퍼가 다르면 선과 글자가 흐려질 수 있습니다.

크기 계산 예시

CSS

300 x 150 · 화면에서 차지하는 실제 레이아웃 크기입니다.

DPR

2배 화면

고해상도 디스플레이에서는 같은 면적에 더 많은 픽셀이 필요합니다.

buffer

600 x 300

canvas.width와 canvas.height는 CSS 크기에 DPR을 곱해 맞춥니다.

4

좌표계 보정

const dpr = window.devicePixelRatio || 1; canvas.width = cssWidth * dpr; canvas.…

핵심Canvas 고해상도 크기 설정은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.