Drawing Rectangles

Methods used to draw rectangles:

Name	Description	Returns
clearRect(x, y, w, h)	Clears the specified rectangle	void
fillRect(x, y, w, h)	Draws a filled rectangle	void
strokeRect(x, y, w, h)	Draws an unfilled rectangle	void

x and y are the offset from the top-left corner of the canvas element. The w and h arguments specify the width and height of the rectangle.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
    Your browser doesn't support the <code>canvas</code> element 
    </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 10, 100, 100);
            ctx.strokeRect(30, 30, 200, 200);}
      </script>
</body>
</html>

Click to view this demo.

The clearRect method clear what has been drawn in the specified rectangle.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
    Your browser doesn't support the <code>canvas</code> element 
    </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 100, 100, 100);
            ctx.strokeRect(130, 130, 100, 100);
            ctx.clearRect(150, 150, 30, 10);}
      </script>
</body>
</html>

Click to view this demo.