CanvasRenderingContext2D.fillRect()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.fillRect() はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の fillStyle に基づいて描きます。

このメソッドはキャンバスに直接描画を行い、現在のパスを変更しません。したがって、その後の fill() または stroke() の呼び出しには影響しません。

構文

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

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

引数

x

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

y

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

width

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

height

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

例

単純な塗りつぶした矩形

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

HTML

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

JavaScript

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

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

結果

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

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

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

仕様書

Specification
HTML Standard
# dom-context-2d-fillrect-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報