Canvas fillStyle: Fill Shapes with Colors, Gradients and Patterns

The Canvas fillStyle property controls the paint used inside filled shapes and text. Set it to a CSS color, a CanvasGradient, or a CanvasPattern before calling methods such as fill(), fillRect(), or fillText().

The default fill style is black.

Basic fillStyle example Top ↑

<canvas id="my_canvas" width="400" height="160"></canvas>

<script>
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#ff00ff';
ctx.fillRect(20, 20, 100, 70);
</script>

fillStyle syntax and accepted values Top ↑

fillStyle is a property, not a function. Assign a supported value with =.

ctx.fillStyle = 'red';              // CSS color
ctx.fillStyle = gradient;           // CanvasGradient
ctx.fillStyle = pattern;            // CanvasPattern

Invalid values are ignored, so the previous valid fill style remains in effect.

Interactive fill color demo Top ↑

Change the rectangle position, size and color. This preserves the original page's interactive purpose while replacing the generated color table and jQuery UI sliders with native browser controls.

Using CSS colors with fillStyle Top ↑

The simplest use is to assign a valid CSS color string.

ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 80, 60);

ctx.fillStyle = 'rgb(220 53 69)';
ctx.fillRect(120, 20, 80, 60);

ctx.fillStyle = 'hsl(45 100% 51%)';
ctx.fillRect(220, 20, 80, 60);

For the rectangle method itself, see fillRect().

Using gradients with fillStyle Top ↑

Create a gradient object, add color stops, assign it to fillStyle, and then draw the filled shape.

const gradient = ctx.createLinearGradient(0, 0, 250, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'red');

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 230, 90);

Continue with Canvas linear gradients or Canvas radial gradients.

Using a pattern with fillStyle Top ↑

createPattern() returns a CanvasPattern. Assign the returned pattern to fillStyle before filling a shape. If the pattern uses an image, wait until the image is ready before creating the pattern.

const image = new Image();
image.src = 'pattern.png';
image.addEventListener('load', () => {
  const pattern = ctx.createPattern(image, 'repeat');
  if (pattern) {
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
});

Common repetition values include 'repeat', 'repeat-x', 'repeat-y', and 'no-repeat'.

fillStyle vs strokeStyle Top ↑

fillStyle remains active until you change it Top ↑

Canvas drawing properties are stateful. Once set, fillStyle is reused by later fill operations until you assign another value or restore an earlier drawing state.

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 70, 50);
ctx.fillRect(100, 10, 70, 50); // still green

Accessibility note Top ↑

Canvas fills are pixels and do not create semantic HTML by themselves. If fill colors communicate categories, warnings, status, values or other important information, provide the same meaning in accessible text or HTML and do not rely on color alone.

Common fillStyle mistakes Top ↑

• Treating fillStyle as a function. It is a property, so assign a value with =.
• Setting fillStyle after fill() or fillRect() and expecting it to recolor pixels that are already drawn.
• Using strokeStyle when you want to color the inside of a shape.
• Creating an image pattern before the source image is ready.
• Expecting beginPath() to be required for fillRect(). Rectangle convenience methods draw directly.

Frequently asked questions Top ↑

What is the default Canvas fillStyle? Top ↑

The default fill style is black.

Can fillStyle use hex, RGB and HSL colors? Top ↑

Yes. fillStyle can use valid CSS color strings, including named colors, hexadecimal, RGB and HSL forms.

Can I use a gradient as fillStyle? Top ↑

Yes. Create a CanvasGradient, add its color stops, and assign the gradient object to fillStyle.

Can fillStyle use an image pattern? Top ↑

Yes. Create a CanvasPattern with createPattern() and assign it to fillStyle.

Does fillStyle affect strokeRect()? Top ↑

No. strokeRect() uses strokeStyle. fillRect() uses fillStyle.

Related Canvas tutorials Top ↑

Canvas tutorial | fillRect() | strokeStyle | Linear gradient | Radial gradient | rect()

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: