An illustration of both of the HTML5 canvas API gradient definition functions - createRadialGradient and createLinearGradient. Use the toggle buttons to show/hide the main canvas which draws objects using the defined gradients and the two reference canvases which show what the underlying gradients look like. I also plotted some reference shapes on the gradients that correspond to the values in the gradient functions. For the radial gradient, this is two circles which define the start and end of the gradient region. For the linear gradient, this is the yellow line which defines the direction of the gradient.