スマホの画面サイズに合わせて、canvasサイズを設定する

記事内にPRが含まれる場合があります

2022年4月24日2024年9月22日

URLをコピーしました！

スマホの画面サイズに合わせて、canvasのサイズを設定する

HTML側は以下のようにする。canvasタグをdivタグ（id=”wrapper”の）で囲っておく。
divタグはCSSで幅高さ100%にしておき、Canvasのサイズは最初のページ読み込み時に、JavaScript側でdivタグの幅高さサイズをセットすることでcanvasのサイズを設定している。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      display:block;
      background-color:#3399CC;
    }
    html, body, #wrapper{
    	width: 100%;
    	height: 100%;
    }
  </style>
  </head>
  <body onload="init()">
  <div id="wrapper">
    <canvas id="aaa"></canvas>
  </div>
  </body>
</html>

JavaScriptは以下のように。

  <script>

    function init() {
      var wpr = document.getElementById("wrapper");
      var cvs = document.getElementById("aaa");

      cvs.width = wpr.offsetWidth;
      cvs.height = wpr.offsetHeight;

      window.alert("screen.width " + screen.width + "、" + "screen.height " + screen.height + "\n"
                   + "cvs.width " + cvs.width + "、" + "cvs.height " + cvs.height);
    }

  </script>