THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 273

// RADCON = (Math.PI/180) ;
RADCON=0.01745329251994;
twelve=0;
three = RADCON * 90;
six = RADCON * 180;
nine = RADCON * 270;

contextNow.beginPath();
contextNow.arc(125,100,50,six,twelve,true);
//contextNow.closePath();
//contextNow.fill()
contextNow.stroke();
}
</ 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 > Smile </ title >
</ head >
< body onLoad = ”CanvasMaster.showCanvas()” >
<figure>
<canvas id = ”beHappy” width = ”300” height = ”200” > You don't see a smile because you
don't have an HTML5 browser. No smile for you! </canvas>
<figcaption>
< p > Rectangle represents canvas boundaries </ p >
</figcaption>
</figure>
</ body >
</ html >

277

h e RADCON variable is a constant (π ÷ 180), so all degrees were set to radians by multiplying
their values by RADCON . As noted, the variable names represent the positions on a clock. In
addition, a rectangle around the area where the arc is drawn represents the boundaries of the
<canvas> tag's width and height. Figure 13-14 shows the result.

h e starting point of the arc is on the let , and it moved anticlockwise to the ending point on
the right. Change the following line:

contextNow.arc(125,100,50,six,twelve,true);

to:

contextNow.arc(125,100,50,six,twelve,false);