HTML5キャンバスをウィンドウサイズにフィットさせる方法

HTML5キャンバスをウィンドウにフィットさせる方法

HTML5のcanvas要素をブラウザのウィンドウ全体にフィットさせたい場合は、CSSを使ってスタイルを調整する必要があります。適切なCSSを設定しないと、余白ができたりスクロールバーが表示されたりして、期待通りの全画面表示が実現できません。

CSSによる基本的な設定方法

まず、canvasを包む親要素（コンテナ）に対してoverflow: hidden;を指定し、はみ出した部分が表示されないようにします。次に、canvas自体をposition: absolute;で絶対配置し、画面の左上（top: 0px、left: 0px）に固定します。

#box {
    overflow: hidden;
}
#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

各プロパティの役割

overflow: hidden;
コンテナからはみ出したコンテンツを非表示にする指定です。これにより、canvasがウィンドウサイズを超えた場合でもスクロールバーが発生せず、見た目が崩れません。

position: absolute;
canvasを通常のドキュメントフローから切り離し、topとleftを0pxに設定することで、常にウィンドウの左上に配置されます。この組み合わせにより、canvasをウィンドウいっぱいに表示できます。

さらに柔軟に対応するには

より完全な全画面対応を目指す場合は、JavaScriptでwindow.innerWidthやwindow.innerHeightを取得し、canvasのwidth・height属性を動的に更新する方法もおすすめです。また、ウィンドウのリサイズイベント（resize）を監視すれば、ユーザーが画面サイズを変更してもcanvasを自動的に追従させることができます。