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

     2 

     3   // Make sure we don't execute when canvas isn't supported

     4   if (canvas.getContext){

     5 

     6     // use getContext to use the canvas for drawing

     7     var ctx = canvas.getContext('2d');

     8 

     9     // Draw shapes

    10     for (i=0;i<4;i++){

    11       for(j=0;j<3;j++){

    12         ctx.beginPath();

    13         var x          = 25+j*50;               // x coordinate

    14         var y          = 25+i*50;               // y coordinate

    15         var radius     = 20;                    // Arc radius

    16         var startAngle = 0;                     // Starting point on circle

    17         var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle

    18         var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

    19     

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

    21     

    22         if (i>1){

    23           ctx.fill();

    24         } else {

    25           ctx.stroke();

    26         }

    27       }

    28     }

    29 

    30   }