HTML canvas createLinearGradient()
Method
Example
Define a gradient from black to white (left to right) as the fill style for a rectangle:
JavaScript:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the createLinearGradient()
method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas>
element.
Definition and Usage
The createLinearGradient()
method creates a linear gradient object.
Gradients can be used to fill rectangles, circles, lines, text, etc.
Tip: Use this object as the value for strokeStyle or fillStyle properties.
Tip: Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.
| JavaScript Syntax: | context.createLinearGradient(x0, y0, x1, y1); | | --- | --- |
Parameter Values
Parameter | Description |
---|---|
x0 | The x coordinate of the gradient start point |
y0 | The y coordinate of the gradient start point |
x1 | The x coordinate of the gradient end point |
y1 | The y coordinate of the gradient end point |
More Examples
Example
Define a gradient (top to bottom) as the fill style for a rectangle:
JavaScript:
Example
Define a gradient from black to red to white as the fill style for a rectangle:
JavaScript: