HTML5キャンバスをページ全体に表示するCSSテクニック

HTML5の<canvas>要素をブラウザのページ全体（ビューポートいっぱい）に表示したい場合、キャンバス自体に幅と高さを指定するだけでは不十分です。htmlやbodyに明示的な高さが設定されていないと、子要素の「height: 100%」が正しく機能しないためです。

基本のCSS設定

まずデフォルトの余白をリセットし、htmlとbodyの高さを100%に設定します。そのうえで、キャンバスを絶対配置（absolute）にして画面全体に広げます。

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
#canvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

各プロパティの役割

• * { margin: 0; padding: 0; } … ブラウザ標準の余白をリセットし、意図しないスクロールバーの発生を防ぎます。
• body, html { height: 100%; } … 親要素に明示的な高さを与えることで、子要素のパーセント指定が有効になります。
• #canvas { position: absolute; } … 通常のドキュメントフローから外して配置することで、他の要素の影響を受けずにページ全体を覆えます。

代替手段：ビューポート単位（vw / vh）を使う

モダンブラウザであれば、ビューポート単位を使うことでよりシンプルに実現できます。

#canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

この方法ならhtmlやbodyへの高さ指定は不要です。ただし、古いブラウザでは非対応の場合がある点に注意してください。

注意点：表示サイズと描画サイズは別物

CSSでキャンバスを拡大表示しても、内部の描画バッファ（width / height 属性）は変わらないため、グラフィックがぼやけることがあります。ウィンドウサイズに合わせて鮮明に描画したい場合は、JavaScriptで属性値を同期させましょう。

const canvas = document.getElementById('canvas');

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.addEventListener('resize', resize);
resize();