さぁ!検索しよう!

canvas要素を常に画面いっぱいに表示されるようにすることで、様々なデバイスに対応させる方法です。

DEMO

canvas要素を囲っている親要素のサイズをcanvas要素のサイズとすることで、画面いっぱいにされています。

HTML

<canvas></canvas><div id="wrap"></div>で囲んでいる点がポイントです。

HTML

<div id="wrap">
  <canvas id="canvas">
  </canvas>
</div>

CSS

CSS

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

#wrap {
  height: 100%;
  width: 100%;
}

#canvas {
  background: #2FCDB4;
  display: block;
}

ポイント

htmlbody#wrapにそれぞれwidth:100%;height:100%;を指定しています。

更に、#canvasdisplay:block;を指定しています。

JavaScript

(function() {
  var canvas = document.getElementById('canvas');
  var container = document.getElementById('wrap');
  sizing();

  function sizing() {
    canvas.height = container.offsetHeight;
    canvas.width = container.offsetWidth;
  }

  window.addEventListener('resize', function() {
    (!window.requestAnimationFrame) ? setTimeout(sizing, 300): window.requestAnimationFrame(sizing);
  });
})();

ポイント

ページ読み込み後とリサイズイベントの発生時に、canvasのサイズをcontainerと同じサイズにする関数sizing()を実行しています。

container.offsetHeightcontainer.offsetWidthは、containerの高さと幅を取得しています。

function sizing() {
    canvas.height = container.offsetHeight;
    canvas.width = container.offsetWidth;
  }

ページ読み込み後

sizing();

リサイズイベントの発生時

window.addEventListener('resize', function() {
    (!window.requestAnimationFrame) ? setTimeout(sizing, 300): window.requestAnimationFrame(sizing);
  });

以上で、HTML5のcanvas要素を常に画面いっぱいに表示されるようにする方法を終わります。