arc.js Example File

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();
        }
      }
    }
  }