var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Creates a reusable radial gradient (object). The gradient object is an object that you can use (and reuse!) to make your path strokes and fills become gradient colored.

About…

The Canvas radial gradient is extremely different from traditional radial gradients.

The “official” (almost undecipherable!) definition of Canvas’s radial gradient is at the bottom of this posting. Don’t look at it if you have a weak disposition!!

In (almost understandable) terms:

• The radial gradient has 2 circles: a “casting” circle and a “display” circle.
• The casting circle casts light into the display circle.
• That light is the gradient.
• The shape of that gradient light is determined by the relative size and position of both circles.

Creating a gradient object is a 2-step process:

1. Create the gradient object itself. During creation you define a line on the canvas where the gradient will start and end. The gradient object is created with var gradient = context.radialLinearGradient.
2. Then add 2 (or more) colors that make up the gradient. This is done by adding multiple color stops to the gradient object with gradient.addColorStop.

Arguments:

• centerX1,centerY1,radius1 defines a first circle where the gradient will be displayed.
• centerX2,centerY2,radius2 defines a second circle which is casting gradient light into the first circle.
• gradientPercentPosition is a float number between 0.00 and 1.00 assigned to a color stop. It is basically a percentage waypoint defining where this particular color stop applies along the gradient.
• The gradient begins at percentage 0.00.
• The gradient ends at percentage 1.00.
• Technical note: The term “percentage” is not technically correct since the values go from 0.00 to 1.00 rather than 0% to 100%.