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

        }

      }

    }

  }