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)
An example of a linear gradient

Figure 15.1. An example of a linear gradient

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

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 ...

Get Jump Start HTML5 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.