Easy Tutorial
❮ Tag Small Tag P ❯

HTML canvas fillStyle Property

HTML canvas Reference Manual

Example

Define a rectangle filled with red:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the fillStyle property.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


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
color A CSS color value indicating the fill color of the drawing
gradient A gradient object used to fill the drawing ( linear radial
pattern A pattern used to fill the drawing

More Examples

Example

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

JavaScript:

Example

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

JavaScript:

Example

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

JavaScript:

Image Used:

Example

Use an image to fill the drawing:

JavaScript:


❮ Tag Small Tag P ❯