Jump Start HTML5

Chapter 15Canvas & SVG: Canvas Gradients

With HTML5 canvas, you're not limited to block colors, but can use gradients to fill shapes such as rectangles and circles. There are two different types of gradient you can use:

// create a linear gradient
createLinearGradient(x,y,x1,y1)

Figure 15.1. An example of a linear gradient

// create a radial gradient
createRadialGradient(x,y,r,x1,y1,r1)

Figure 15.2. An example of a radial gradient

Let's start by creating a linear gradient (the canvas context, ctx, has already been defined):

// create linear ...