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 StandardThe 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.
Update compatibility data on GitHub
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()
CanvasRenderingContext2D.rect() by Mozilla Contributors is licensed under CC-BY-SA 2.5.