[Canvas] 캔버스 사이즈 설정

 

캔버스 사이즈 설정.

 

HTML Canvas는 일반적인 HTML 요소와는 다르게 렌더링 방식이 다릅니다. HTML 요소들은 일반적으로 브라우저가 렌더링을 할 때, 요소의 크기와 위치를 계산하고 그에 따라 화면에 그려집니다. 반면에 HTML Canvas는 픽셀 단위로 직접 그리기를 수행하므로, CSS로 지정된 크기와 Canvas의 실제 크기가 다를 경우 브라우저는 Canvas를 재조정하지 않습니다.

따라서 Canvas의 크기가 CSS로 지정된 크기와 다를 경우, Canvas가 재조정되어 물체가 뭉개지는 현상이 발생할 수 있습니다.

 

 이를 방지하기 위해서는 Canvas 요소의 실제 크기를 JavaScript를 사용하여 지정하거나, Canvas 요소의 크기와 CSS 크기를 일치시켜야 합니다. 

 

캔버스의 사이즈를 조절하는 방식은 두 가지가 있는데 각 방법은 다음과 같습니다. 

canvas 태그의 자체 크기를 css로 조절하는 방법과 canvas 자체 속성인 width, heigth을 조절하는 방법이 있다. 

canvas 자체 속성의 기본 값은 300, 150이다. 

 

이 두 크기를 통일 시켜주어야 정상적으로 브라우저가 캔버스의 크기를 조절하고 실제 canvas 내부 자체도 일치되는 크기를 가져 정상적으로 표현되게 됩니다.

 

 

 

devicePixelRatio?? 줄여서 dpr이라고도 부른다.

 

이는 하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀의 수를 말합니다. 

 

dpr이 높을 수록 더 선명한 그래픽을 보여줄 수 있습니다. 

 

개발자도구에서 window의 전역 객체의 devicePixelRatio 속성을 확인할 수 있습니다.

 

여기서 canvas 태그의 크기가 아닌 canvas 사이즈와 도형의 scale 값에 이 비율을 곱해지면 논리적으로 devicePixelRatio 값만큼 더 고해상도의 그림이 표현됩니다. 

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const canvasWidth = 300;
const canvasHeight = 300;

const dpr = window.devicePixelRatio;

canvas.style.width = `${canvasWidth}px`;
canvas.style.height = `${canvasHeight}px`;

canvas.width = canvasWidth * dpr;   //default 300
canvas.height = canvasHeight * dpr; // default 150

ctx.fillRect(10, 10, 50, 50);

ctx.scale(dpr, dpr); // 캔버스의 크기를 dpr배로 확대해줌.

 

 

선을 그리기 위해선 다음과 같이 beginPath와 closePath를 호출해주어야 합니다.

ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI, true);
ctx.stroke();
ctx.closePath();

 

이를 requestAnimationFrame에서 이를 활용할 때 고려해야 하는 점이 있는데, 서로 다른 프레임을 가진 모니터에서 

같은 속도로 동작하기 위한 것이다. 

 

FPS는 frame per second를 뜻하는데,  1초에 requestAnimationFrame 함수를 몇 번 실행하는지에 대한 값이다. 

 

이는 FPS를 통일함으로 써 서로 다른 주사율을 가진 디스플레이에 동일한 효과를 줄 수 있다.

 

보통 60FPS 정도는 사용하니 다음과 같이 구현할 수 있다. 

 

delta 값을 정의하는데 이는 애니메이션이 호출되고 실행된 값이고 이 값을 1000/60 보다 작은 경우 렌더링 하지 않게 처리하면 된다. 

 

초기화된 고정된 시간 변수를 만들고 이 변수를 현재 시간에서 빼주면 한 번 호출될 때마다 얼만큼의 시간이 흘렀는지 알 수 있다. 

 

그 차이를 delta 변수에 담고 이 delta 값이 우리가 목표하는 fps 임계점( 1000/ 60 == 약 16) 보다 작은 경우 다음 신을 그리지 않도록 하고 클 경우에만 그리도록 코드를 작성하면 된다. 

 

물론 고정된 시간을 담고있는 변수는 현재시간에서 (delta % interval)  값을 빼어 업데이트해주어야 한다.