Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Linear Gradient Tutorial

Description

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.

Demo