Draw Rectangle and Circle shape in HTML5 canvas

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.
 

stroke and fill rectangle in html5

 
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

Another Examples

Draw smiley in HTML5
Load image in circle shape in HTML5