To create a linear gradient with HTML5 Canvas, we can use the createLinearGradient() method. Linear gradients are defined by an imaginary line which defines the direction of the gradient. Once we've created our gradient, we can insert colors using the addColorStop property.
The direction of the linear gradient moves from the starting point to the ending point of the imaginary line defined with createLinearGradient(). In this tutorial, we've used two color stops, a light blue that originates at the starting point of the gradient, and a dark blue that ends with the ending point. Color stops are placed along the imaginary line somewhere between 0 and 1, where 0 is at the starting point, and 1 is at the ending point.