CanvasRenderingContext2D.rect()

CanvasRenderingContext2D.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。

現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 fill() (en-US) または stroke() メソッドを使用することができます。

メモ: 矩形の作成とレンダリングを一度に行うには、 fillRect() または strokeRect() メソッドを使用してください。

構文

js

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

rect() メソッドは、 (x, y) を始点とし、 width と height で大きさを指定した矩形のパスを作成します。

引数

x

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

y

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

width

矩形の幅です。正の値の場合は右側に、負の値の場合は左側になります。

height

矩形の高さです。正の値の場合は下側に、負の値の場合は上側になります。

例

矩形を描画

この例は、矩形のパスを rect() メソッドを使用して生成します。このパスは fill() メソッドをし擁して描画されます。

HTML

html

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

JavaScript

矩形の角は (10, 20) の位置です。幅は 150 で高さは 100 です。

js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 20, 150, 100);
ctx.fill();

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報