CanvasRenderingContext2D.rect()

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.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。

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

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

構文

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

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

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

html

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

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

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

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