canvas size 이해

canvas size 이해

devicePixelRatio(dpr)은

하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수이다.

 

dpr이 다르더라도 보여지는 모습이 달라지지 않도록 구현하는 방법을 알아본다.

내용의 출처는 맛있는 코딩 님 강의에서 가져왔다.

 

 

 

 

 

const canvas = document.querySelector('canvas');
canvas.style.backgroundColor = 'gold';

const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio;

const canvasWidth = 400;
const canvasHeight = 400;

canvas.width = canvasWidth * dpr;
canvas.height = canvasHeight * dpr;
ctx.scale(dpr, dpr);

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

ctx.fillRect(10,10,50,50);