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

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

<body>
  <div class="container">
    <canvas class="canvas"></canvas>
  </div>
</body>

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

次にCSS（SCSS）コード。

.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で実行すると次のとおりとなる。

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