Drawing a rectangle in canvas using HTML 5

FillRect and strokeRect are two methods to draw rectangle in Canvas .
We can use any of the method

Code :

<canvas id="myCanvas" width="578" height="250">
     </canvas>  
    <br />
     <input type="button" onclick="DrawRectangle()" value="Draw Rectangles" /> 

Javascript :

<script type="text/javascript">
        function DrawRectangle() {
            var context = document.getElementById('myCanvas').getContext('2d');
                         context.beginPath();
             context.lineWidth = "5";
             // rect(x, y, rectangle-width, rectangle-height);
             context.strokeRect(10, 10, 50, 100);
             context.fillStyle = "Red";
             context.fillRect(20, 20, 30, 50);
  
            context.strokeStyle = "green";
             context.strokeRect(150, 100, 100, 100);
             context.globalAlpha = 0.5;
              context.fillStyle = "red";
             context.fillRect(200, 150, 100, 100);
        }
   </script>