[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 * d..

2022.06.16