I hope by now we have learned how to draw lines in HTML5 Canvas element. The very next thing is to draw some shapes.
To draw the rectangle the code looks like

context.strokeRect(leftTopX, leftTopY, rightButtomX, rightButtomY);

The above code will create a rectangle with only the outlines. If we want to fill the rectangle with color then the code will look as below.

context.fillRect(leftTopX, leftTopY, rightButtomX, rightButtomY);

In similar way to draw a circle we will use the command to draw an arc as below.

context.arc(x, y, radius, startAngle, endAngle, is_it_anticlockwise);
//example
context.arc(230, 90, 50, 0, Math.PI*2, false);

Now the concept is same as drawing a stroked circle or a filled as to call the stroke method or fill method.

context.beginPath(); // Start the path 
context.arc(230, 90, 50, 0, Math.PI*2, false); // Draw a circle 
context.closePath(); // Close the path 
//define style
context_one.fillStyle = "#F0F";
context_one.strokeStyle = "#FF0";
context_one.lineWidth   = 10;
//fill and stroke
context.fill(); // Fill the path
context.stroke();//stroke the path

The source files for this example is here for you to download and play with it.