Create Gradient in Canvas | HTML5 Canvas Gradient Tutorial (Linear and Radial)

Create Gradient in Canvas | HTML5 Canvas Gradient Tutorial (Linear and Radial)

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - creates a linear gradient
createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient
Once we have a gradient object, we must add two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.

To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

#knowledgethrusters

[KennyFully]

Thank you! Very informative and straight to the point!