Canvas fillStyle Property
Example
Define a red fill-color for the rectangle:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
More examples below.
Description
The fillStyle property sets or returns the color, gradient, or pattern used to
fill the drawing.
The default value is #000000 (solid black).
See Also:
The strokeStyle Property (Set stroke color/style)
The fillRect() Method (Draw a filled rectangle)
The rect() Method (Draw an unfilled rectangle)
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:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const 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:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const 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:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const 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:
Example
Use an image to fill the drawing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
Try it Yourself »
Browser Support
The <canvas> element is an HTML5 standard (2014).
fillStyle() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |