THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 272

You can i nd plenty of calculators online to do the conversion for you.

Arcs
h e canvas DOM method for drawing arcs is context.arc() . h e method has several
parameters that need to be understood in concert and individually:

x,y : Circle's center
radius : Radius of circle
startAngle : Start point of arc expressed in radians
endAngle : End point of arc expressed in radians
anticlockwise : Boolean ( true is counterclockwise and false is clockwise)

I i nd it helpful to envision either a compass rose or a clock with the four cardinal directions
and time/degrees — north (12 o'clock or 0 degrees), east (3 o'clock or 90 degrees), south (6
o'clock or 180 degrees), and west (9 o'clock or 270 degrees). A full arc statement looks like the
following:

contextNow.arc(150,100,50,six,0,true);

h is arc has its center at x = 150 and y = 100, and it has a radius of 50. h e start angle is set to
6, which is a variable that we've created to represent the 6 o'clock position of 180 degrees. h e
variable's value has been converted to radians. Both degrees and radians have the same value
at the 12 o'clock position (0), and it is used as the ending angle. Finally, the arc is set to true —
anticlockwise.

276

h is next program is one used to experiment with dif erent arcs. Four variables — 12, 3, 6,
and 9 — are set in radians corresponding to the positions on a clock. Certain statements are
commented out but will be used later.

<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“beHappy”);
contextNow = canvasNow.getContext('2d');
contextNow.beginPath();
contextNow.moveTo(0,0);
contextNow.lineTo(300,0);
contextNow.lineTo(300,200);
contextNow.lineTo(0,200);
contextNow.closePath();
contextNow.stroke();