.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current
void ctx.fillRect(x, y, width, height);
fillRect() method draws a filled rectangle whose starting point is at
(x, y) and whose size is specified by
height. The fill style is determined by the current
- The x-axis coordinate of the rectangle's starting point.
- The y-axis coordinate of the rectangle's starting point.
- The rectangle's width. Positive values are to the right, and negative to the left.
- The rectangle's height. Positive values are down, and negative are up.
A simple filled rectangle
This example draws a filled green rectangle using the
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);
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
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(0, 0, canvas.width, canvas.height);
|HTML Living Standard
The definition of 'CanvasRenderingContext2D.fillRect' in that specification.
|Basic support||Chrome Full support Yes||Edge Full support 12||Firefox Full support Yes||IE Full support Yes||Opera Full support Yes||Safari Full support Yes||WebView Android Full support Yes||Chrome Android Full support Yes||Edge Mobile Full support Yes||Firefox Android Full support Yes||Opera Android Full support Yes||Safari iOS Full support Yes||Samsung Internet Android Full support Yes|
- Full support
- Full support