THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas fill() Method

❮ Canvas Object

Example

Draw a 150*100 pixels rectangle, and fill it with the color red:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
fill() 4.0 9.0 3.6 4.0 10.1

Definition and Usage

The fill() method fills the current drawing (path). The default color is black.

Tip: Use the fillStyle property to fill with another color/gradient.

Note: If the path is not closed, the fill() method will add a line from the last point to the startpoint of the path to close the path (like closePath()), and then fill the path.

JavaScript syntax: context.fill();

❮ Canvas Object