Tutorials References Menu

HTML canvas fillStyle Property

❮ HTML Canvas Reference

Example

Define a red fill-color for the rectangle:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

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

Browser Support

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

Method
fillStyle() Yes 9.0 Yes Yes Yes

Definition and Usage

The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.

Default value: #000000
JavaScript syntax: context.fillStyle=color|gradient|pattern;

Property Values

Value Description Play it
color A CSS color value that indicates the fill color of the drawing. Default value is #000000 Play it »
gradient A gradient object (linear or radial) used to fill the drawing  
pattern A pattern object to use to fill the drawing  

More Examples

Example

Define a gradient (top to bottom) as the fill style for the rectangle:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

Example

Define a gradient (left to right) as the fill style for the rectangle:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

Example

Define a gradient that goes from black, to red, to white, as the fill style for the rectangle:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »

Image to use:

Lamp

Example

Use an image to fill the drawing:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
Try it Yourself »

❮ HTML Canvas Reference