Canvas Tutorials

Canvas Methods and Properties

Linear Gradient in Canvas in HTML

Linear Gradient



As we know, a gradient is a smooth transition from one color to another. We can apply it to different shapes, and boxes on canvas.


The method used for the linear gradient is:-


  • createLinearGradient(x,y,x1,y1)


Parameter Explanation:-


  • x is the initial x-coordinate.
  • y is the initial y-coordinate.
  • x1 is the final x-coordinate.
  • y1 is the final y-coordinate.


For your Information:-


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

Code Explanation

All Tutorials related to Canvas Tutorials

All Sections related to Canvas