Skip to Main Content
HTML5: Up and Running
book

HTML5: Up and Running

by Mark Pilgrim
August 2010
Intermediate to advanced content levelIntermediate to advanced
222 pages
7h 12m
English
O'Reilly Media, Inc.
Content preview from HTML5: Up and Running

Gradients

 

IE[a]

Firefox

Safari

Chrome

Opera

iPhone

Android

Linear gradients

7.0+

3.0+

3.0+

3.0+

10.0+

1.0+

1.0+

Radial gradients

·

3.0+

3.0+

3.0+

10.0+

1.0+

1.0+

[a] Internet Explorer support requires the third-party explorercanvas library.

Earlier in this chapter, you learned how to draw a rectangle filled with a solid color (see Simple Shapes), then a line stroked with a solid color (see Paths). But shapes and lines aren’t limited to solid colors. You can do all kinds of magic with gradients. Figure 4-8 shows an example.

The markup looks the same as any other canvas:

<canvas id="d" width="300" height="225"></canvas>

First, we need to find the <canvas> element and its drawing context:

var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
A left-to-right linear gradient

Figure 4-8. A left-to-right linear gradient

Once we have the drawing context, we can start to define a gradient. A gradient is a smooth transition between two or more colors. The canvas drawing context supports two types of gradients:

  • createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).

  • createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. The first three parameters represent the starting circle, with origin (x0, y0) and radius r0. The last three parameters represent the ending circle, with origin (x1, y1) and radius r1.

Let’s make a linear gradient. Gradients can be any size, but we’ll ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

HTML5 in Action

HTML5 in Action

Greg Wanish, Rob Crowther, Joe Lennon, Charles Brindle
HTML5 Cookbook

HTML5 Cookbook

Christopher Schmitt, Kyle Simpson
AngularJS

AngularJS

Shyam Seshadri, Brad Green

Publisher Resources

ISBN: 9781449392154Errata Page