HTML canvas fillStyle Property

Example

// Accessing the element
let c = document.getElementById("myCanvas");

// Styling canvas
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(25, 25, 100, 100);

Try this code ❯

Meaning

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

Standard Syntax

Default value:

#000000

JavaScript syntax:

context.shadowOffSetY=color|gradient|pattern;

Property Values

Value	Description
color	Specifies a CSS color value that the fill color of the drawing. Default value is #000000
gradient	Specifies a gradient object to fill the drawing.
pattern	Specifies a pattern object to use to fill the drawing.