The CanvasRenderingContext2D.rect()
method of the Canvas 2D API adds a rectangle to the current path.
Like other methods that modify the current path, this method does not directly render anything. To draw the rectangle onto a canvas, you can use the fill()
or stroke()
methods.
rect(x, y, width, height)
The rect()
method creates a rectangular path whose starting point is at (x, y)
and whose size is specified by width
and height
.
This example creates a rectangular path using the rect()
method. The path is then rendered using the fill()
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
The rectangle's corner is located at (10, 20). It has a width of 150 and a height of 100.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 20, 150, 100);
ctx.fill();
Result