[Canvas] window.devicePixelRatio (dpr)

2024.04.14 - [Canvas] - [Canvas] 캔버스 사용하기 | 캔버스 사이즈 | fillRect()

[Canvas] 캔버스 사용하기 | 캔버스 사이즈 | fillRect()

캔버스 사이즈에 이어 dpr에 대해 알아본다.

 

dpr은 하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수를 말한다. 이 윈도우 전역변수 값을 통해서 1 픽셀을 실제로 그리는데 몇 픽셀을 쓰는지 알 수 있다. 예를 들어 dpr이 2인 것은 논리적 픽셀 하나가 물리적 픽셀 두 개와 같다는 것을 의미한다. dpr이 높을 수록 더 선명한 그래픽을 보일수있다.

 

 

* 논리적 픽셀 (Logical Pixel): css 픽셀. 웹 콘텐츠를 표시하는 기본 단위로, 모바일 디바이스나 데스크톱 컴퓨터와 같은 다양한 디스플레이에서 동일한 크기로 웹 콘텐츠를 표시하기 위해 사용된다.

* 물리적 픽셀 (Physical Pixel): 실제 디스플레이의 각각의 작은 점. 디스플레이의 해상도를 결정하는 단위로, 디스플레이의 크기와 해상도에 따라 다르다.

 

현재 내 노트북의 dpr값을 콘솔로 찍어 확인한다

console.log(window.devicePixelRatio);

내 노트북의 dpr 값은 1이다.

이 값을 dpr 변수를 생성해 담아주고 canvas.width와 canvas.height에 곱해준다. 그리고 ctx.scale()을 통해 dpr값을 곱해준다.

728x90

const dpr = widdow.devicePixelRatio

const canvasWidth = 300

const canvasHeight = 300

canvas.style.width = canvasWidth + 'px'

canvas.style.height = canvasHeight + 'px'

canvas.width = canvasWidth

canvas.height = canvasHeight

ctx.scale(dpr, dpr)

이렇게 하면 dpr이 2 이상인 디스플레이에서 더 선명하게 볼 수 있다.

 

예를 들어 dpr이 2인 경우 line 6~7을 통해 캔버스의 실제 크기(물리적 크기)는 300*300이 아닌 600*600이 된다. 논리적 크기에 dpr를 곱해 고해상도 디스플레이에서도 선명하게 보일 것이다.

ctx.scale(dpr, dpr)은 캔버스의 컨텍스트를 스케일링한다. 이후에 그리는 모든 도형과 이미지가 dpr에 맞춰 조정되어 고해상도 디스플레이에서도 왜곡되지 않는다. dpr이 2일때 ctx.fillRext(0, 0, 100, 100)으로 사각형을 그려도 100*100 논리적 픽셀이 dpr을 고려해 200*200 물리적 픽셀에 그려진다.