CanvasRenderingContext2D: rect() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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
Specification |
---|
HTML Standard # dom-context-2d-rect-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect
CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.stroke()