CanvasRenderingContext2D.fillRect()

構文

void ctx.fillRect(x, y, width, height);

fillRect() メソッドは塗りつぶした矩形を、 (x, y) を始点とし、 width と height でサイズを指定しで描画します。塗りつぶしのスタイルは、現在の fillStyle 属性によって決定されます。

引数

x

矩形の開始位置の X 座標です。

y

矩形の開始位置の Y 座標です。

width

矩形の幅です。正の数であれば右方向、負の数であれば左方向です。

height

矩形の高さです。正の数であれば下方向、負の数であれば上方向です。

例

単純な塗りつぶした矩形

fillRect メソッドを利用した簡単な使用例です。

HTML

<canvas id="canvas"></canvas>

JavaScript

矩形の左上は (20, 10) です。幅は 150 で高さは 100 です。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);

結果

キャンバス全体の塗りつぶし

このコードでは、キャンバス全体を矩形で塗りつぶします。これは、背景を作成し、その上に他のものを描画するのに便利です。このため、矩形の寸法は <canvas> 要素の width と height 属性に等しくなるように設定されています。

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

仕様書

ブラウザーの互換性

関連情報

• このメソッドを定義しているインターフェイス: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillStyle
• CanvasRenderingContext2D.clearRect()
• CanvasRenderingContext2D.strokeRect()