1. HTML5 Canvas Tutorial
2. HTML5 Canvas Overview
3. HTML5 Canvas: Stroke and Fill
4. HTML5 Canvas: Rectangles
5. HTML5 Canvas: clearRect()
6. HTML5 Canvas: Paths
7. HTML5 Canvas: Gradients
8. HTML5 Canvas: Shadows
9. HTML5 Canvas: Text
10. HTML5 Canvas: Images
11. HTML5 Canvas: Composition
12. HTML5 Canvas: Transformations
13. HTML5 Canvas: State + State Stack
14. HTML5 Canvas: toDataURL()
15. HTML5 Canvas: Pixel Manipulation
16. HTML5 Canvas: Animation

• fillRect()
• strokeRect()
  • Line Width
• Rectangle Color

One of the easiest shapes to draw on an HTML5 canvas element is a rectangle. You do so using the 2D Context functions fillRect() and strokeRect(). Here is a simple example:

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);

Here is how the rectangles look when drawn:

fillRect()

The fillRect() function draws a filled rectangle delimited by the upper left corner, and then the width and height.

Remember, that the canvas coordinate system starts with 0,0 being the upper left corner of the canvas, and then x increases to the right, and y increses downwards. The is the reverse of a normal coordinate system where y increases upwards.

The 4 parameters (x, y, width, height) are passed to the fillRect() function. Here is an example:

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.fillRect(x, y, width, height);

Here is the resulting rectangle:

The rectangle is black because the example did not set the fillStyle property of the 2D Context.

strokeRect()

The strokeRect() function draws the outline of a rectangle, without filling it. The rectangle is delimited by the upper left corner coordinates (x, y) and the width and height of the rectangle.

Here is a code example:

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.strokeRect(x, y, width,height);

The rectangle is black because the example did not set the strokeStyle property of the 2D Context.

Line Width

You can set the line width of the stroked rectangle using the lineWidth property of the 2D Context. Here is how:

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.lineWidth = 4;
context.strokeRect(x, y, width, height);

Here is how the rectangle looks with a line width of 4:

Rectangle Color

You can set the color of the drawn rectangle using either the fillStyle or strokeStyle properties of the 2D Context. Here is the first example again, with these settings in bold:

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.lineWidth   = 4;
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);

And here are the rectangles drawn on a canvas again: