The following code examples shows a method that creates a rectangle and circle on the canvas. We use the strokeRect and fillRect methods to draw and fill rectangle.
These methods requires the following parameters:
starting points(x,y) : specify the x and y coordinates (with 0,0 in the upper-left corner of the canvas
height: specify the height of the rectangle.
width: specify the width of the rectangle.

The following example draws the two rectangles(stroke and fill).
<html> <head> <title>Draw Arc</title> <style type="text/css"> #MyCanvas {border:1px solid black;} </style> <script type="text/javascript"> function drawRectangle() { var ctx; var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { ctx = canvas.getContext("2d"); ctx.font = "11pt Helvetica"; ctx.strokeStyle = "#2954D3"; ctx.strokeRect(50, 20, 75, 75); ctx.fillText("stroke Rectangle", 40, 120); ctx.fillStyle = "#2954D3"; ctx.fillRect(200, 20, 75, 75); ctx.fillText("Fill Rectangle", 190, 120); } } </script> </head> <body onload="drawRectangle();"> <canvas id="MyCanvas" width="400" height="200"> This browser or document mode doesn't support canvas object</canvas> </body> </html>
Draw Circle
To draw arcs and circles, we use the arc method like as:
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Where x and y are the coordinates of the circle’s center. Radius is self explanatory. The startAngle and endAngle parameters for the start and end points of the arc in radians from the x axis. See here : Draw Arc or Circle on HTML5 canvas