We can set the fill and stroke styles using gradients, rather than solid colors.
A gradient is a gradual progression between two or more colors.
The canvas element supports two kinds of gradients: linear and radial.
The two methods are described in the following table.
| Name | Description | Returns |
|---|---|---|
| createLinearGradient(x0, y0, x1, y1) | Creates a linear gradient | CanvasGradient |
| createRadialGradient(x0, y0, r0, x1, y1, r1) | Creates a radial gradient | CanvasGradient |
Both of these methods return a CanvasGradient object.
The methods from CanvasGradient object defines the method shown in the following table.
The arguments describe the line or circle used by the gradient.
| Name | Description | Returns |
|---|---|---|
| addColorStop(<position>, <color>) | Adds a solid color to the gradient line | void |