Drawing with the Canvas - HTML5 Programming for ASP.NET Developers - page 101

Figure 4-18. Linear gradient
Using the start and end points of the gradient, you can change how the linear gradient is drawn. For
example, if you create a linear gradient object using start and end coordinates of (50, 10) and (200, 100),
respectively, the resulting gradient is as shown in Figure 4-19.
Figure 4-19. Changing the coordinates of the gradient line
The process of filling a shape with a radial gradient is similar to the preceding example, with a few
differences. First, you use the createRadialGradient() method to create a radial gradient object. Second,
instead of the start and end coordinates, you supply coordinates for the center of the start and end circles
along with their respective radii. Listing 4-17 shows how this is done.