CanvasRenderingContext2D: rect() method

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.

Note: To both create and render a rectangle in one step, use the fillRect() or strokeRect() methods.

Syntax

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.

Parameters

x: The x-axis coordinate of the rectangle's starting point.
y: The y-axis coordinate of the rectangle's starting point.
width: The rectangle's width. Positive values are to the right, and negative to the left.
height: The rectangle's height. Positive values are down, and negative are up.

Return value

None (undefined).

Examples

Drawing a rectangle

This example creates a rectangular path using the rect() method. The path is then rendered using the fill() method.

HTML

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.beginPath(); // Start a new path
ctx.rect(10, 20, 150, 100); // Add a rectangle to the current path
ctx.fill(); // Render the path

Result

Specifications

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

Browser compatibility

BCD tables only load in the browser