THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 276

sunsetGradient.addColorStop(0, “yellow”);
sunsetGradient.addColorStop(1, “#cc0000”)
contextNow.fillStyle = sunsetGradient;

In this particular example, the gradient is a vertical one. h e i rst color, yellow, is at the top,
and the second color, red, is at the bottom. Putting it all together, the following script ( Sun-
set.html in this chapter's folder at www.wiley.com/go/smashinghtml5 ) creates a
sunset for you.

<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“sunset”);
contextNow = canvasNow.getContext('2d');
sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
sunsetGradient.addColorStop(0, “yellow”);
sunsetGradient.addColorStop(1, “#cc0000”)
contextNow.fillStyle = sunsetGradient;
contextNow.beginPath();
contextNow.arc(200,200,150,0,Math.PI*2,false);
contextNow.closePath();
contextNow.fill()
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
}
</ style >
< meta http-equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Sunset </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<figure>
<canvas id = ”sunset” width = ”400” height = ”400” > A shame you can't see the beautiful
sunset because you don't have an HTML5 browser. Aloha... </canvas>
<figcaption>
< p > Sunset </ p >
</figcaption>
</figure>
</ body >
</ html >

280

When you test the page, you'll see a big circle with a yellow-to-red gradient. You can use the
same gradient technique with other shapes as well. Figure 13-16 is displayed in the mobile
version of Safari on an iPhone.