YouTip

## HTML Canvas `fillStyle` Property The `fillStyle` property of the Canvas 2D API sets or returns the color, gradient, or pattern used to fill shapes. When you draw shapes like rectangles, circles, or custom paths, the canvas uses the value of `fillStyle` to color their interiors. --- ## Syntax and Usage ### JavaScript Syntax ```javascript context.fillStyle = color | gradient | pattern; ``` ### Property Values | Value | Description | Default Value | | :--- | :--- | :--- | | **`color`** | A CSS color value (string) representing the solid color used to fill the drawing. | `#000000` (Black) | | **`gradient`** | A CanvasGradient object (either linear or radial) used to fill the drawing. | N/A | | **`pattern`** | A CanvasPattern object (an image, canvas, or video repeated in a specified direction) used to fill the drawing. | N/A | --- ## Code Examples ### 1. Filling with a Solid Color You can use any valid CSS color format, such as color names, hexadecimal values, RGB, RGBA, HSL, or HSLA. ```html ``` --- ### 2. Filling with a Linear Gradient You can create a gradient using `createLinearGradient(x0, y0, x1, y1)` and assign it to `fillStyle`. #### Example A: Vertical Gradient (Top to Bottom) ```html ``` #### Example B: Horizontal Gradient (Left to Right) ```html ``` #### Example C: Multi-color Gradient ```html ``` --- ### 3. Filling with an Image Pattern You can repeat an image as a pattern using `createPattern(image, repetition)`. The repetition options are `'repeat'`, `'repeat-x'`, `'repeat-y'`, or `'no-repeat'`. ```html ``` --- ## Considerations & Best Practices * **State Management:** The `fillStyle` property is part of the canvas 2D drawing state. If you change `fillStyle`, all subsequent shapes will be filled with the new style until you change it again or restore a saved canvas state using `ctx.save()` and `ctx.restore()`. * **Image Loading:** When using `createPattern()` with an external image, ensure the image has completely loaded (e.g., inside an `onload` event handler) before assigning the pattern to `fillStyle` and drawing. * **Performance:** Reusing gradient and pattern objects is more performant than recreating them on every frame of an animation loop. * **Browser Support:** The `fillStyle` property is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 8 and earlier versions do not support the `` element.