캔버스 사이즈 제대로 이해하기

안녕하세요
오늘은 캔버스 사이즈에 대해서 살펴보겠습니다.

👉🏻고해상도 이미지 표현하기

요즘에는 디스플레이 자체가 워낙 고해상도이다. 픽셀 집적도가 거의 기존의 2배 이상이 디폴트이기 때문에, 이미지 작업을 할 때도 300px짜리 이미지를 만든다고 하면, 300px로 만들지 않고, 600px로 만든 다음, CSS등으로 절반을 줄여서 표현해준다! 선명하게 표현해주기 위해서! 캔버스도 동일합니다.

dpr 해상도 설명

위에 처럼 디스플레이의 해상도 dpr이 1 일때는 왼쪽과 같고, dpr이 2일때는 오른쪽과 같습니다.(하나의 1픽셀을 4등분으로 나눠서 표현) 따라서 dpr이 높을수로 더 선명한 그래픽을 보여주는 겁니다.

맥을 쓰고 있는 분들은 dpr이 2로 나올것이기 때문에 1픽셀을 실제로 그리는데 4개의 픽셀을 쓰고 있다고 보시면 됩니다.

👉🏻캔버스 사이즈 제대로 이해하기

다음과 같이 캔버스 자체의 크기가 가로 4픽셀, 세로 4픽셀이라고 가정을 하고, 빨간 박스 가로2픽셀, 세로2픽셀 정사각형을 그렸습니다. 여기서 디스플레이의 해상도가 dpr이 1인 경우에 canvas.width에 1을 곱하고, canvas.height에 1을 곱하고, ctx.scale(1, 1)을 하게 되면 아무런 변화가 없습니다.

해상도와, 캔버스 사이즈 설명

그런데 이번에는 디스플레이의 해상도가 dpr이 2인(레티나 디스플레이)에서 본다고 가정을 하면 canvas.width에 2을 곱하고, canvas.height에 2을 곱하고, ctx.scale(2, 2)을 하게 되면

캔버스 자체의 크기는 2배로 커집니다.
여기서 canvas의 사이즈인 canvas.style.width = 4, canvas.style.height = 4을 하게 되면 캔버스의 고유한 크기를
css에 맞춰서 강제로 사이즈 조절이 됩니다.

해상도와, 캔버스 사이즈 설명

그럼 이렇게 물리적인 가로8 * 세로8인 캔버스 안에 가로4 * 세로4인 빨간 박스가 작게 보여지는 원리 입니다.

👉🏻 코드로 설명

다음은 위에서 설명한 이론적인것을 코드로 작성한것 입니다.

(() => {
  const $ = (el) => document.querySelector(el);
  const ctx = $('canvas').getContext('2d');
  const dpr = window.devicePixelRatio;

  const canvasWidth = window.innerWidth;
  const canvasHeight = window.innerHeight;

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

  $('canvas').width = canvasWidth * dpr;
  $('canvas').height = canvasHeight * dpr; 

  ctx.scale(dpr, dpr);
  ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
  ctx.fill();
})();