캔버스 크기 이해하기

const canvas = document.querySelector('canvas')
//HTML 문서 내에서 <canvas> 요소를 찾아서 가져옵니다.

const ctx = canvas.getContext('2d')
//2D 그래픽을 그리기 위한 컨텍스트를 가져옵니다.

const dpr = window.devicePixelRatio 
//현재 장치의 픽셀 비율을 가져옵니다. 이 값은 Retina 디스플레이 등 고해상도 디스플레이에서 픽셀 밀도를 조정하는 데 사용됩니다.

const canvasWidth = 300
const canvasHeight = 300
//캔버스의 너비와 높이를 지정합니다.

canvas.style.width = canvasWidth + 'px'
canvas.style.height = canvasHeight + 'px'
//CSS 스타일을 사용하여 캔버스의 가로 및 세로 크기를 지정합니다. 이 코드는 캔버스가 화면에 얼마나 큰지를 결정합니다.

canvas.width = canvasWidth * dpr
canvas.height = canvasHeight * dpr
//캔버스의 실제 너비와 높이를 설정합니다. 이 때, 장치의 픽셀 비율을 고려하여 크기를 설정합니다.

ctx.scale(dpr, dpr)
//그리기 컨텍스트에 대한 변환을 적용하여 픽셀 비율에 따라 캔버스에 더 많은 픽셀을 그릴 수 있도록 합니다.

//ctx.fillRect(10,10,50,50)
//현재 그리기 스타일과 위치를 기준으로 사각형을 그립니다. 여기서는 캔버스의 (10,10) 위치에서 시작하여 가로 50, 세로 50의 크기를 가지는 사각형을 그립니다.