canvas를 이용하여 차트를 그렸는데, pc로 볼때는 괜찮던 화질이 모바일로 볼 때 저하되는 현상이 있어 이 글을 작성하게 되었다.
canvas에는 두 가지 영역이 존재하는데,
하나는 HTML의 <canvas> 요소 자체의 영역이고, 하나는 실제로 그려지는 영역이다.
영역이 두 개가 존재하기 때문에 canvas의 크기를 지정하기 위해서는 <canvas> 요소의 width, height 속성을 이용하는 방법과, css를 이용하는 방법 총 두 가지가 있다.
<canvas> 요소의 크기와 canvas 그리기 영역의 크기가 다르면 우선 canvas 그리기 영역에 맞춰 그린 뒤에 그 영역을 캔버스 요소의 크기로 맞춰주는데 이를 이용하여 화질 저하 현상을 해결할 수 있다.
dpr(기기 픽셀 비율 -> 물리적 픽셀 / 논리적 픽셀)에 맞춰 canvas의 그리기 영역을 키우고 이를 축소하면 되는데 축소하는 작업은 브라우저가 해주기 때문에 그리기 영역을 키우기만 하면 되고, 마지막으로 scale() 함수를 이용하여 canvas 유닛의 크기도 dpr에 맞춰 키워주면 된다.
아래는 캔버스 화질을 보정하는 코드다.
const canvas = document.querySelector('.canvas-element');
const ctx = canvas.getContext('2d');
// DPR 정보 가져오기
const dpr = window.devicePixelRatio;
// 캔버스 요소의 크기 가져오기
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
// 캔버스 유닛 크기 보정
scale(dpr, dpr);
참고
https://jaehyeon48.github.io/htmlcss/resolve-blurry-canvas-in-hi-resolution/
'JavaScript&TypeScript' 카테고리의 다른 글
JavaScript - 연락처에 하이픈 추가 (0) | 2024.03.28 |
---|---|
JavaScript - 한글 조사 처리 (0) | 2024.03.15 |
TypeScript - any 타입을 지양하는 이유 (0) | 2023.09.10 |
NestJS - class-validator 데코레이터 (0) | 2023.09.07 |
NestJS - 네이밍 규칙 (0) | 2023.09.03 |