タイトル通りだが、HTML5のcanvas要素をレスポンシブ対応させるCSSコードを紹介する。
またここで紹介するコードは、画面サイズに合わせて伸縮する際に、縦横比を維持したまま要素のサイズが変わるので、使われるケースは多いと思う。

まず、サンプルとして簡単なHTMLを用意した。

1
2
3
4
5
<body>
  <div class="container">
    <canvas class="canvas"></canvas>
  </div>
</body>

canvas要素は、何らかのブロック要素に内包させておく必要がある。

次にCSS（SCSS）コード。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
.container {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  max-width: 600px;
  max-height: 340px;
  margin: 10px auto;
 
  .canvas {
    background: #c00;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 340px;
  }
}

こちらのコードをCodePenで実行すると次のとおりとなる。

画面サイズに合わせて、縦横比を維持しながらリサイズされていることが分かる。