Canvas: fillStyle

The fillStyle property sets the color or other paint used by fill methods such as fillRect().

Basic example

const context = canvas.getContext('2d'); context.fillStyle = '#2463eb'; context.fillRect(20, 20, 120, 60); context.fillStyle = 'tomato'; context.fillRect(160, 20, 50, 60);

The property keeps its current value until you change it. Set it before the drawing operation whose color you want to control.

What can be assigned

You can assign a CSS color string, a gradient, or a pattern. A color that looks clear on one background may not be sufficient for every user, so explain important information with text or shape as well.

Common mistakes

• fillStyle does not draw anything by itself; call a fill method afterward.
• Check that the context is not null before setting the property.
• Do not use color alone to communicate status or meaning.