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
void ctx.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.
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.rect(10, 20, 150, 100); ctx.fill();
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.rect' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rect | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect
CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fill()
CanvasRenderingContext2D.stroke()