JavaScriptでキャンバス全体を特定の色で塗りつぶす方法｜fillRect()の使い方

HTMLのcanvas要素全体を特定の色で塗りつぶしたい場合は、Canvas APIのfillRect()メソッドを使うのが最もシンプルな方法です。fillRect()は、指定した座標とサイズをもとに、単色で塗りつぶされた矩形（四角形）を描画できます。

ポイントは、矩形の描画開始位置を左上の原点 (0, 0) に設定し、サイズとしてキャンバス自身の width（幅）と height（高さ）プロパティを渡すことです。こうすることで矩形がキャンバス全体を覆い、結果的に背景色として機能します。

基本的なコード例

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

対応するHTML

<canvas id="my-canvas"></canvas>

コードの解説

• getElementById()：HTMLから対象のcanvas要素を取得します。
• getContext("2d")：描画用の2Dコンテキストを取得します。すべての描画操作はこのコンテキストを通じて行われます。
• fillStyle：塗りつぶしに使用する色を指定します。色名のほか、HEX値（例：#0000ff）やRGB値も利用可能です。
• fillRect(0, 0, width, height)：原点 (0, 0) からキャンバスの幅・高さいっぱいまで矩形を描画し、全体を塗りつぶします。

この方法は、ゲームの背景や図形のベースカラーを設定する際など、さまざまな場面で活用できます。色を動的に変更したい場合は、fillStyle に変数やユーザー入力の値を代入するだけで簡単に実装できます。