Canvasのrect関数について

概要

JavaScript（JS）における「rect( ... )」関数は、主にCanvas要素を扱う際に使用される関数。
rect( ... )関数は、Canvas上に矩形（四角形）を描画するために使用される。

以下に構文を示す。

context.rect(x, y, width, height);

• context: 描画コンテキスト。Canvas要素のgetContext()メソッドを使用して取得できる。描画する対象のキャンバスを指定している。
• x: 矩形の左上隅のx座標。
• y: 矩形の左上隅のy座標。
• width: 矩形の幅。
• height: 矩形の高さ。

以下にコード例を示す。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
 
context.beginPath();
context.rect(50, 50, 100, 75);
context.stroke();
 

この例では、指定した座標と寸法に基づいて矩形が描画され、stroke()メソッドによって矩形の外枠が描画される。