|  | Home · All Classes · All Functions · Overviews

# arc.js Example File
script/context2d/scripts/arc.js

     var canvas = document.getElementById('tutorial');

       // Make sure we don't execute when canvas isn't supported
       if (canvas.getContext){

         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');

         // Draw shapes
         for (i=0;i<4;i++){
           for(j=0;j<3;j++){
             ctx.beginPath();
             var x          = 25+j*50;               // x coordinate
             var y          = 25+i*50;               // y coordinate
             var radius     = 20;                    // Arc radius
             var startAngle = 0;                     // Starting point on circle
             var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
             var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

             ctx.arc(x,y,radius,startAngle,endAngle, clockwise);

             if (i>1){
               ctx.fill();
             } else {
               ctx.stroke();
             }
           }
         }

       }