Canvas 2D · 01 좌표와 픽셀

단계: 픽셀과 드로잉 상태 · 편집 가능한 예제 · 저장 ID: canvas-2d-01

목표와 학습 후 역량

JavaScript 함수·배열, DOM 이벤트와 좌표를 다룰 수 있어야 합니다.

CSS 크기는 배치 단위이고 width와 height는 픽셀 버퍼 크기입니다. DPR만큼 버퍼를 늘린 뒤 논리 좌표를 변환해야 같은 크기로 선명하게 그립니다.

canvas.width 대입은 그림과 그리기 상태를 초기화합니다. 리사이즈 때 setTransform으로 배율을 다시 지정하면 중복 확대를 피할 수 있습니다.

기존 내장 예제는 출발점만 제공합니다. 확장 요구사항 전체가 구현된 예제가 아니며 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. 브라우저 버전과 viewport, DPR을 기록하세요.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

외부 실습 프로젝트의 day-01.js와 index.html을 준비하세요. canvas의 CSS 크기를 400×240으로 정하고 getContext('2d')로 격자와 원을 그리세요.
버퍼를 CSS 크기×DPR로 설정하고 setTransform(DPR,0,0,DPR,0,0)을 적용해 실제 버퍼 크기를 output에 표시하세요.
입력 조건 1에서 출력을 저장한 뒤 2 조건으로 다시 실행하세요. 예상: 논리 도형 크기는 같고 버퍼 픽셀 수는 네 배가 됩니다. 실제 화면·로그와 대조하고 day-01-notes.md에 실제 결과와 차이의 원인을 남기세요.

변수	기준 조건	바꿀 조건	예상할 변화·검증 가설
DPR	1	2	논리 도형 크기는 같고 버퍼 픽셀 수는 네 배가 됩니다

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.