fillStyle

fillStyle is a property of the 2D rendering context of an HTML canvas. It defines the color, gradient, or pattern to be used for filling shapes drawn with fill-related methods. The value can be a CSS color string, a CanvasGradient object, or a CanvasPattern object.

Color values supported include standard CSS color formats such as hex codes (#RRGGBB), rgb(), rgba(), hsl(), and named colors. CanvasGradient objects are created with methods like createLinearGradient and createRadialGradient, which define color transitions. CanvasPattern objects are created with createPattern, using an image, canvas, or video as the source. Once fillStyle is assigned, it applies to subsequent fill operations until changed.

In practice, fillStyle affects filling operations such as fill(), fillRect(), fillPath(), and other shapes created by the canvas API. If a gradient or pattern is used, the fill is rendered according to the defined geometry of the shape and the properties of the gradient or pattern. The default fillStyle is black (#000000) if not explicitly set.

Notes for developers: changing fillStyle only affects future fills; it does not retroactively alter previously drawn content. fillStyle is complementary to strokeStyle, which governs outlines, and to other drawing state properties. When using gradients or patterns, ensure the source image or canvas is ready and, for patterns, that the repetition mode (repeat, repeat-x, repeat-y, no-repeat) is appropriate for the desired effect.