Tutorials References Menu

HTML canvas fill() Method

❮ HTML Canvas Reference

Example

Draw two 150*100 pixels rectangles. Fill one with a red color and the other with a blue color:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill();
Try it Yourself »

Browser Support

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

Method
fill() Yes 9.0 Yes Yes Yes

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();

❮ HTML Canvas Reference