창에 맞게 HTML5 캔버스 크기 조정

질문 : 창에 맞게 HTML5 캔버스 크기 조정

---

페이지에 맞게 <canvas> 요소의 크기를 자동으로 조정하려면 어떻게해야합니까?

예를 들어, height 및 width 속성을 100 % <div> 크기를 조정할 수 <canvas> 는 크기가 조정되지 않습니다.

답변

---

나는 이것에 대한 우아한 해결책을 찾았다 고 믿는다.

자바 스크립트

/* 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;
}

지금까지 나에게 큰 부정적인 성능 영향을 미치지 않았습니다.

출처 : https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window