YouTip

## HTML Canvas `createLinearGradient()` Method The `createLinearGradient()` method of the Canvas 2D API creates a linear gradient along the line given by the coordinates represented by the parameters. This method returns a linear `CanvasGradient` object. To apply the gradient to shapes, you assign this object to the canvas context's `fillStyle` or `strokeStyle` properties. You can then define color transitions along the gradient line using the `addColorStop()` method. --- ## Browser Support The `createLinearGradient()` method is fully supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Syntax and Parameters ### JavaScript Syntax ```javascript const gradient = context.createLinearGradient(x0, y0, x1, y1); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `x0` | Number | The x-coordinate of the start point of the gradient. | | `y0` | Number | The y-coordinate of the start point of the gradient. | | `x1` | Number | The x-coordinate of the end point of the gradient. | | `y1` | Number | The y-coordinate of the end point of the gradient. | ### Return Value * **Type:** `CanvasGradient` * **Description:** A linear gradient object configured with the specified coordinates. --- ## How to Use: `addColorStop()` Once you have created a `CanvasGradient` object, you must define its colors using the `addColorStop()` method. ```javascript gradient.addColorStop(offset, color); ``` * **`offset`**: A value between `0.0` and `1.0` representing the position of the color along the gradient line. `0.0` represents the start point, and `1.0` represents the end point. * **`color`**: A CSS color string (e.g., `"red"`, `"#FF0000"`, `"rgba(0, 0, 0, 0.5)"`). --- ## Code Examples ### Example 1: Horizontal Gradient (Left to Right) This example creates a horizontal gradient that transitions from black on the left to white on the right. ```html ``` --- ### Example 2: Vertical Gradient (Top to Bottom) This example creates a vertical gradient that transitions from black at the top to white at the bottom. ```html ``` --- ### Example 3: Multi-Color Gradient You can add as many color stops as you like. This example creates a horizontal gradient transitioning from black to red, and then to white. ```html ``` --- ## Key Considerations 1. **Coordinate Space:** The coordinates passed to `createLinearGradient()` are relative to the canvas coordinate system, not the shape you are drawing. If you draw a shape outside the gradient's coordinate boundaries, the color of the closest edge of the gradient will stretch to fill the rest of the shape. 2. **Performance:** Recreating gradient objects inside an animation loop (e.g., `requestAnimationFrame`) can impact performance. Where possible, define your gradients globally or cache them if their coordinates do not change. 3. **Diagonal Gradients:** You can easily create diagonal gradients by specifying both horizontal and vertical offsets (e.g., `ctx.createLinearGradient(0, 0, 150, 100)`).