Easy Tutorial
❮ Event Onreset Met Win Setinterval ❯

HTML Canvas fillStyle Property

Canvas Object

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 a rectangle:

JavaScript:

Example

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

JavaScript:

Example

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

JavaScript:

Image Used:

Example

Use an image to fill the drawing:

JavaScript:


Canvas Object

❮ Event Onreset Met Win Setinterval ❯