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

   // Убеждаемся, что код не выполнится когда канва не поддерживается
   if (canvas.getContext){

     // используем getContext чтобы использовать канву для рисования
     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
         var y          = 25+i*50;               // координата y
         var radius     = 20;                    // Arc radius
         var startAngle = 0;                     // Starting point on circle
         var endAngle   = Math.PI+(Math.PI*j)/2; // Конечная точка окружности
         var clockwise  = i%2==0 ? false : true; // по часовой или против

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

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

   }