Window 크기에 맞게 HTML 5 Canvas 크기 조정하기

 

브라우저 크기에 따라 Canvas의 크기를 Fit 하려면 아래와 같이 두 가지 방법으로 처리할 수 있다.

JAVA SCRIPT

// important! for alignment, you should make things
// relative to the canvas' current width/height.

function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

 

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}