음악, 삶, 개발

부모에 따라 <canvas> 를 현명하게 늘리기 (feat. 큰 canvas 와 CSS) 본문

개발 Web/HTML & CSS

부모에 따라 <canvas> 를 현명하게 늘리기 (feat. 큰 canvas 와 CSS)

Lee_____ 2021. 7. 1. 03:39

HTML5 의 canvas 는 보통 div 안에 넣어서 아래와 같이 사용을 한다.

<div class='parent'>
	
    <canvas class='canvas' />
	
</div>

이 상황에서의 문제점은, browser 크기를 조절할때 canvas 는 가만히 있게 된다.

이 부분에 대해 window.addEventListener('resize') 를 활용하여,  브라우저 크기가 변할때마다  cavas.width 와 canvas.height 을 변경하는 JS 코드를 작성했었으나, 퍼포먼스는 매우 처참했다. 엄청나게 느리게 브라우저 크기가 조절이 된것이다.

이것저것 해본 결과 결론을 내었다.

 

1. canvas 를 꽤나 크게 만든다.

canvas.width  = 2000
canvas.height = 2000

2. css 를 사용해 div 에 맞춰 stretch 한다.

.parent { 
	
    position: relative;

}

.canvas {
	
    position: absolute;
    width: 100%;
    height: 100%;

}

canvas.width 와 canvas.height 속성은 css 로 width 와 height 을 조절하는것과 다르다!!!

css 에서 canvas 의 width 와 height 를 설정할 경우, 현재 canvas 를 말 그대로 부모 태그에 맞춰 stretch 한다.

이때 canvas.width 가 stretch 할 부모의 width 보다 매우 작다면, 오래된 사진을 보는것마냥 매우 뿌옇게 (blur) 되는 것을 경험할수있다.

이를 방지하고 선명하게 canvas 를 그려지게하기위해서는, 애초에 canvas.width 와 canvas.height 를 크게 설정한뒤에,

이 보다 작도록 css 에서 줄여주는것이다.

 

이를 좀 더 현명하게 처리할려면 아마도 사용자 모니터 resolution 을 detect 한뒤에 이를 canvas.width 와 canvas.height 로 설정해주는것도 방법일것이다.

아무래도 canvas 크기가 너무 크면 램 사용량이 커지지않을까 하는 추측이있따..