The CanvasRenderingContext2D
.fillRect()
method of the Canvas 2D API draws a rectangle that is filled according to the current fillStyle
.
This method draws directly to the canvas without modifying the current path, so any subsequent fill()
or stroke()
calls will have no effect on it.
Syntax
void ctx.fillRect(x, y, width, height);
The fillRect()
method draws a filled rectangle whose starting point is at (x, y)
and whose size is specified by width
and height
. The fill style is determined by the current fillStyle
attribute.
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
A simple filled rectangle
This example draws a filled green rectangle using the fillRect()
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
The rectangle's top-left corner is at (20, 10). It has a width of 150 and a height of 100.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(20, 10, 150, 100);
Result
Filling the whole canvas
This code snippet fills the entire canvas with a rectangle. This is often useful for creating a background, on top of which other things may then be drawn. To achieve this, the dimensions of the rectangle are set to equal the <canvas>
element's width
and height
attributes.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(0, 0, canvas.width, canvas.height);
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.fillRect' 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fillRect
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1.5 |
IE
Full support 9 |
Opera
Full support 9 |
Safari
Full support 2 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
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.fillStyle
CanvasRenderingContext2D.clearRect()
CanvasRenderingContext2D.strokeRect()
CanvasRenderingContext2D.fillRect() by Mozilla Contributors is licensed under CC-BY-SA 2.5.