devicepixelratio는 뭐지

devicePixelRatio

Canvas를 이용해 개발하다보면 DevicePixelRatio 이하 dpr 이라고 하는 속성에 대해 접하는 경우가 많다.

같은 canvas 상인데 어떤 화면에선 뚜렷하게 다른 화면에선 흐릿하게 보여지는 경우가 있는데 이때 devicePixelRatio 속성을 이용하면 해결이 가능할 수 도 있다.

window.devicePixelRatio로 확인이 가능하며 현 디스플레이 장치에 대한 '물리적 픽셀' 해상도와 'CSS 픽셀' 해상도의 비율을 반환한다. 한마디로 픽셀 크기의 비율을 뜻한다.

기본적으로 값이 1으로 기존 96 DPI 디스플레이를 의미하며 값이 2이면 HiDPI/Retina 디스플레이로 예측이 된다.

예를 들어, retina 화면에서 canvas가 흐릿하게 보인다면 선명하게 보이기 위해 window.devicePixelRatio를 사용해야 한다.

const width = 1024;
const heigth = 512;
const dpr = window.devicePixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;

CSS Pixel

절대 길이 "px"의 css 단위와 동의어로 정확히 1 css 인치의 1/96으로 정의된다.

devicePixelRatio는 canvas에서만 적용이 가능한가?

문득, devicePixelRatio는 브라우저의 픽셀 크기의 비율을 뜻하는데 canvas에서만 적용이 가능한지 의문이 들었다.

GPT 선생님에게 여쭈어본 결과
다양한 용도로 사용이 가능하지만 주로 캔버스 요소에서 dpr를 이용해 고해상도로 렌더링 하기 위해 사용하기 때문이다 라고 답변을 해주셨다.