[JavaScript] 자바스크립트 캔버스(Canvas)에 디바이스 화소 맞추기

093_자바스크립트 캔버스(Canvas)에 디바이스 화소 맞추기

[적용]

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

---

[내용]

캔버스 요소는 화소의 비율 계산에 사용할 수 있다.

캔버스에 표시하고 싶은 사이즈에 화소비율을 곱해서 값을 설정한다.

표시 사이즈를 지정하는 스타일 시트를 확인해 보자.

// 디바이스 화소 비율 가져오기
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.fillStyle = 'red';
context.arc(w / 2, h / 2, 100, 0, 2 * Math.PI);
context.fill();

// 화면에 로그를 표시
document.querySelector('.log').innerHTML = 
    `디바이스의 화소 비율은 ${dpr}입니다.`;

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김