Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE ARCS

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.arc(x,y,r,start_angle,end_angle [,counterclockwise]); x is the horizontal center of the circle
y is the vertical center of the circle
r is the circle's radius
angle are expressed in radians:
1 radian = 180/pi or 57.29577 degrees;
1 degree = pi/180
     0° is at 3 o'clock, (0 radians)
    90° is at 6 o'clock (radians = pi/2 or Math.PI/2.0),
   180° is at 9 o'clock (radians = pi radians or Math.PI),
   270° is at 12 o'clock(radians = 3 x pi/2 or 3.0 * Math.PI /2.0),
   360° is at 3 o'clock (radians = 2.0 * Math.PI)
start_angle (in radians, normally calculated using degrees and the formula:
   radians = degree * Math.PI /180.0)
end_angle (in radians, normally calculated using degrees and the formula:
   radians = degree * Math.PI /180.0)
[,counterclockwise] is OPTIONAL, false=clockwise, true=counter clockwise
name_for_the_canvas_context.arcTo(x1,y1,x2,y2,radius); x1 is the horizontal co-ordinate of the first point
y1 is the vertical co-ordinate of the first point
x2 is the horizontal co-ordinate of the second point
y2 is the vertical co-ordinate of the second point
r is the circle's radius drawn between the two points

Here is a canvas:

<canvas id="arc_example" width="500" height="350"" style="border:solid blue 1px;"></canvas>

Here is the code: 

var aex = document.getElementById("arc_example");
var arrc = aex.getContext("2d");

x=100.;
y=100.;
r=50.;
degdiff=36.0;
dstart=0.;
dend=degdiff;
arrc.strokeStyle="black";
arrc.lineWidth=1;
arrc.beginPath();
for (i=0;i<10;i++)
     {
         if ( i % 2 == 0)
         {
          arrc.beginPath();
          a1=dstart*Math.PI/180.0;
          a2=dend*Math.PI/180.0;
          arrc.arc(x,y,r,a1,a2,false);
          arrc.stroke();
          arrc.closePath();
         }
         dstart=dstart+degdiff;
         dend=dend+degdiff;
     }
arrc.strokeText("1. alternating arcs",x-40,y);

arrc.beginPath();
arrc.strokeStyle="green";
arrc.lineWidth=3;
arrc.arc(250,100,50,0.0,2.0*Math.PI,false);
arrc.stroke();
arrc.closePath();

arrc.lineWidth=1;
arrc.strokeText("2. green width=3",210,y);

arrc.beginPath();
arrc.fillStyle="blue";
arrc.arc(400,100,50,0.0,2.0*Math.PI,false);
arrc.fill();
arrc.closePath();

arrc.strokeStyle="white";
arrc.strokeText("3. blue solid",360,y);


arrc.beginPath();
arrc.fillStyle="blue";
arrc.arc(100,250,50,0.0,2.0*Math.PI,false);
arrc.fill();
arrc.strokeStyle="red";
arrc.lineWidth=4;
arrc.arc(100,250,50,0.0,2.0*Math.PI,false);
arrc.stroke();
arrc.closePath();

arrc.lineWidth=1;
arrc.strokeStyle="white";
arrc.strokeText("4. blue red border",60,250);

var pie_pc = new Array(0.25, 0.10, 0.20, 0.15, 0.30);
var pie_color = new Array("red","blue","green","gray","yellow");

astart=0.0
y0=250.0;
x0=250.0;
r=50.0;
arrc.strokeStyle="black";
arrc.strokeText("5. Pie Chart",350,200);
for (i=0;i<5;i++)
    {
     arrc.beginPath();
     arrc.moveTo(x0,y0);
     aend=astart+pie_pc[i]*360.0;
     a1=astart*Math.PI/180.0
     y1=50.0*Math.sin(a1)+y0;
     x1=50.0*Math.cos(a1)+x0;
     arrc.lineTo(x1,y1);
     a2=aend*Math.PI/180.0;
     y2=50.0*Math.sin(a2)+y0;
     x2=50.0*Math.cos(a2)+x0;
     arrc.arc(x0,y0,r,a1,a2);
     arrc.moveTo(x2,y2);
     arrc.lineTo(x0,y0);
     arrc.fillStyle=pie_color[i];
     arrc.fill();
     arrc.lineWidth=1;
     arrc.stroke();
     arrc.strokeText("    "+pie_color[i]+" = "+(pie_pc[i]*100.0)+" %",350,220+i*20);
     astart=aend;0

     }