CanvasRenderingContext2D.rect()

Canvas 2D APIのCanvasRenderingContext2D.rect() メソッドは、2Dウィンドウのサイズ(width, height)や開始位置(x, y)を定義できるメソッドです。

ウィンドウのサイズと開始位置をもとに直線で引かれたウィンドウが2Dウィンドウになり、fillメソッドでウィンドウ内の塗りつぶしをしたり、strokeメソッドでウィンドウの外周を直線で囲み、可視化することなどできます。

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

x

2Dウィンドウの開始位置(x軸)

y

2Dウィンドウの開始位置(y軸)

width

2Dウィンドウの幅

height

2Dウィンドウの高さ

この例は、 rect メソッドを使用してウィンドウの作成をするシンプルなコードです。
内容は、canvas内に作成したウィンドウに対して、fill() (en-US) を実行し、ウィンドウ内を黒塗りにしているだけになります。
上に記載してあるウィンドウを黒塗りする fill() (en-US) 以外にも、

• stroke()
• fillRect()
• strokeRect()

などが存在しているので、参考にしてみてください。

HTML

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

JavaScript

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

下のコードを変更してみよう:

• CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect
• CanvasRenderingContext2D.strokeRect()
• CanvasRenderingContext2D.fill() (en-US)
• CanvasRenderingContext2D.stroke()