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.
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);
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.
BCD tables only load in the browser