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()