Draw a Rectangle using the HTML <canvas> Tag

<canvas id="myCanvas" width="350" height="590">
<p>Fallback content for browsers that don't support the canvas tag.</p> 
</canvas>
<script>
var canvasRect = document.getElementById("myCanvas");
var ctxRect = canvasRect.getContext("2d");

// Using fillRect()
ctxRect.fillRect (5, 5, 180, 100);

// Using clearRect()
ctxRect.clearRect(20, 20, 50, 70);

// Using strokeRect()
ctxRect.strokeRect (5, 130, 180, 100);

// Using rect() with fill()
ctxRect.beginPath();
ctxRect.rect(5, 260, 180, 100);
ctxRect.fill();

// Using rect() with stroke()
ctxRect.rect(5, 380, 180, 100);
ctxRect.stroke();
</script>

The above example demonstrates five different ways to draw a rectangle using the HTML <canvas> element.

A rectangle can be defined with the following methods:

fillRect()

Paints the given rectangle onto the canvas, using the current fill style.

strokeRect()

Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.

clearRect()

Clears all pixels on the canvas in the given rectangle.

rect()

Defines the rectangle but requires further methods before it's painted it to the canvas. This is a path command and is intended to be used when creating a path. See below for more info.

The above methods allow you to specify the width, height and coordinates of the rectangle. The default color of the rectangle is black — if nothing further is specified when the context is created, the rectangle will have a stroke and fill value of #000000 (black).

Style a Rectangle

You can change the rectangle's color from the default black. A rectangle can have its stroke and/or fill styles defined in the following ways:

fillStyle

Allows you to fill the rectangle with the color specified.

Example: context.fillStyle = 'red'

strokeStyle

Represents the color or style to use for the rectangle's stroke (i.e. the rectangle's outline).

Example: context.strokeStyle = 'blue'

Create a Rectangle within a Path

A rectangle can also be defined as part of a path in the following way:

rect()

This method adds a new closed subpath to the path (in the form of a rectangle). The rectangle isn't actually painted to the canvas until either the fill() and/or stroke() methods are called.

fill()

Fills the subpaths of the current path or the given path with the current fill style.

stroke()

Strokes the subpaths of the current path or the given path with the current stroke style.