230111 항해99 66일차 Canvas의 Size

1. Canvas의 크기는 Canvas Element에 각각 width, height속성으로 설정한다.

<canvas id="myCanvas" width="500" height="400"></canvas>

이런식으로 html 테그로 바로 입력 할 수도 있고,

var _canvas = document.querySelector("#myCanvas");
 
_canvas.width = 500;
_canvas.height = 400;

이렇게 JavaScript에서 설정할 수도 있다.

2. Canvas의 style로 크기를 설정할 경우 Canvas의 실제 크기가 변경되는 것이 아니라 Canvas를 단지 style로 설정한 크기로 늘리는 것이다.
   

3. Canvas의 크기는 절대값으로 숫자로만 입력된다. 100% 등의 상대값으로 입력되지 않는다. 만약 width="100%"라고 입력하면 그냥 width가 100px이 된다. 따라서 브라우저 창의 크기가 변하더라도 항상 100% 크기가 되려면 onresize 이벤트에서 크기를 설정해 주어야한다.

var _canvas;
            
window.onload = function(e) {
	_canvas = document.querySelector("#myCanvas");        
	setCanvasSize();
}
            
window.onresize = function(e) {
	setCanvasSize();
}
            
function setCanvasSize() {
	_canvas.width = _canvas.parentElement.width;
	_canvas.height = _canvas.parentElement.height;
}

4. Canvas의 크기가 설정되면 Context에 그려졌던 모든 그림이 초기화된다. 그래서 그림을 계속 유지하려면 Canvas 크기를 설정한 후 그림을 다시 그려줘야한다.

_context.clearRect(0, 0, _canvas.width, _canvas.height);        

Canvas 전체를 지울 때 clearRect 함수로 Canvas 크기만큼을 지우는 방법도 있고,

_canvas.width = _canvas.width;

width값을 다시 넣어주는 방법도 있다.

5. Canvas의 크기를 설정하지 않은 기본 크기값은 300 x 150 이다.

참조:
HTML5 Canvas의 Size