음악, 삶, 개발
부모에 따라 <canvas> 를 현명하게 늘리기 (feat. 큰 canvas 와 CSS) 본문
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 크기가 너무 크면 램 사용량이 커지지않을까 하는 추측이있따..