Demo:

Gradients with HTML5 Canvas

Please note: this demo page is to go along with the post HTML5 Canvas: Gradients, so please use that for reference.

Linear gradients

Linear gradient with two colours

Linear gradient with four colours

Linear gradient on shape outline

Radial gradients

Two color radial gradient

Two colour radial gradient within circle shape

Four colour radial gradient within circle shape