Drawing Rectangles with Canvas

Following example will show you how to draw simple rectangles with Canvas Element

Example

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150">
   </canvas>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)"; // red colour
        ctx.fillRect (10, 10, 55, 50); //ctx.fillRect(x1,y1,x2,y2)
      }
    }
  </script>
 </body>
</html>

Output

Untitled