CANVAS SIZE

Canvas 픽셀 버퍼 기준

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

크기 계산 예시

CSS

300 x 150

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

DPR

2배 화면

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

buffer

600 x 300

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

좌표계 보정

const dpr = window.devicePixelRatio || 1;
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;
ctx.scale(dpr, dpr);

그린 좌표는 CSS 픽셀 기준으로 유지하고, 내부 버퍼만 촘촘하게 만들어 선명도를 확보합니다.