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

Figure 15.1. An example of a linear gradient

// create a radial gradient
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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.