[책] 자바스크립트 코드 레시피 278 - 85일차

캔버스에 디바이스 화소 맞추기

• 캔버스 요소를 고해상도 디스플레이로 표시하고 싶을 때

설명

캔버스 요소는 화소의 비율 계산에 사용할 수 있습니다. 캔버스에 표시하고 싶은 사이즈에 화소 비율을 곱해서 값을 설정합니다. 표시 사이즈를 지정하는 스타일 시트를 확인합니다.

실습

window.onload = () => {

  const dpr = window.devicePixelRatio; // 디바이스 화소 비율 가져오기
  const w = 200; // 캔버스의 논리적 크기
  const h = 200; // 캔버스의 논리적 크기

  const canvas = document.querySelector('canvas');
  canvas.width = w * dpr; // 실제 크기는 배가 됨
  canvas.height = h * dpr; // 실제 크기는 배가 됨
  canvas.style.width = w + 'px'; // 화면 표시 단위 설정
  canvas.style.height = h + 'px'; // 화면 표시 단위 설정

  const context = canvas.getContext('2d');
  context.scale(dpr, dpr); // 내부적으로 N 배의 사이즈
  context.arc(w / 2, h / 2, 100, 0, 2 * Math.PI);
  context.fill();

  console.log(`디바이스의 화소 비율은 ${dpr}입니다.`);

};