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

<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

Browser compatibility

See also

• The interface defining this method: CanvasRenderingContext2D
• fillRect
• strokeRect()
• fill()
• stroke()