Canvas Linear Gradients
How to Create a Linear Gradient
To create a linear gradient, follow these steps
- canvas - Assigning the canvas element to a variable.
- ctx - Assigning the 2d rendering context to another variable by calling the
- grad - Creating a new CanvasGradient object using
createLinearGradient()canvas method, then assigning it to a variable.
- addColorStop() - Use
addColorStop()canvas method to add a new color stop, defined by an offset and a color.
- fillStyle - Use
fillStylecanvas property to specify the gradient to use inside shapes (any shape).
- fillRect() - Use
fillRect()canvas method to draws a rectangle that is filled according to the current
|x0||Specifies the x-axis coordinate of the start point.|
|y0||Specifies the y-axis coordinate of the start point.|
|x1||Specifies the x-axis coordinate of the end point.|
|y1||Specifies the y-axis coordinate of the end point.|
Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Canvas.
Please do google search for:
Join Our Channel
This channel is primarily useful for Full Stack Web Developer.