Canvas 태그 사용시 고해상도 모니터 대응하는 방법

canvas를 사용할 때에는 사용자의 모니터가 평범한 모니터인지 고해상도 모니터인지 고려해야 합니다.

평범한 모니터의 1px이 1px로 구성되어 있다면 고해상도 모니터의 경우 평범한 모니터에서 1px이 차지하는 면적이 4px로 구성되어 있습니다.

그래서 고해상도 모니터에서 보다 더 선명한 화면을 볼 수 있습니다.

그래서 고해상도 모니터에서 더욱 선명한 화면을 볼 수 있도록 대응을 해줘야 합니다.

다음 코드를 사용하면 사용자 컴퓨터의 화면해상도의 값을 구할 수 있습니다.

const dpr = window.devicePixelRatio

고해상도 모니터를 사용한다면, window.devicePixelRatio 값이 2가 되고, 평범한 모니터를 사용한다면 window.devicePixelRatio 값이 1이 됩니다.

const canvas = document.querySelector('canvas')

const ctx = canvas.getContext('2d')

const dpr = window.devicePixelRatio

const canvasWidth = 300
const canvasHeight = 300

canvas.style.width = canvasWidth + 'px'
canvas.style.height = canvasHeight + 'px'

canvas.width = canvasWidth * dpr
canvas.height = canvasHeight * dpr

 

window.devicePixelRatio 값을 canvas 태그의 가로, 세로 값에 곱해주면 고해상도에서 두배의 크기를 보여줍니다.

그래서 해상도에 맞게 동일한 크기로 보여지게 하려면 다음 코드를 마지막에 추가해 줍니다.

ctx.scale(dpr, dpr)

 

이렇게 canvas 태그 사용시 고해상도 모니터 대응하는 방법에 대해서 알아봤습니다.

감사합니다.