method of the Canvas 2D API draws a rectangle that is filled according to the current
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 Standard |
BCD tables only load in the browser