HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles

Up to now, in the first chapter of this tutorial, we have cared about integrating the Canvas element into our website and in the second chapter, we have to drawn our first lines. Now, we will see how to draw rectangles, squares and circles and how to fill them with color.

This tutorial consists of the following chapters:

• Chapter 1: Introduction and Basics
• Chapter 2: Drawing Lines
• Chapter 3: Rectangles and Circles
• Chapter 4: Write Text on Canvas

Who has never worked with the HTML5 Canvas before, should begin with reading the first part of this tutorial, because all other things are based on it.

Drawing a simple Rectangle

For drawing a simple rectangle, there is available the function rect() that is expecting 4 parameters (X and Y coordinate, width and height).

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);   // x, y, b, h
context.strokeStyle = "#000000";  // style for border
context.stroke();                 // draw border

Instead of calling moveTo and lineTo known from the last part of this tutorial, here it is sufficient to only use rect() to draw the path of a rectangle. In order to make this path visible with a line, again we have to call stroke() after defining the line color with strokeStyle.

Thus, this example is drawing a black outline of a rectangle beginning at the point 10/10 having a width and a height of both 100 pixel making the rectangle square.

Fill Rectangle with Color

So far, we have only drawn lines. Now, we would like to see how to fill the rectangle from the last example with color.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);    // x, y, b, h
context.fillStyle = "#FF0000";     // style for filling   
context.fill();                    // draw filling

For this purpose, it is enough to use the property fillStyle and the method fill() instead of using strokeStyle and stroke().

Like you can define the style of the line with strokeStyle, with fillStyle it is possible to define the style of a feeling. In our example, we are setting fillStyle to #FF0000 (red).

Finally, we are calling fill(). This function is working similar to stroke(). The only difference is that stroke() is filling the defined path (our rectangle in this case) with the style specified with fillStyle instead of drawing a line.

Therefore, this example is drawing a red rectangle without border.

Colored Rectangle with Border

You can easily combine the methods stroke() and Fill() as you can see in the following example.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);   // x, y, b, h
context.strokeStyle = "#000000";  // style for border
context.stroke();                 // draw border
context.fillStyle = "#FF0000";    // style for filling
context.fill();                   // draw filling

In this example, we are combining the first two examples in order to draw a red rectangle with a black colored border. So, after we have defined a path, we can trace it with a line, we can fill it or we can do both.

Drawing Rectangles using strokeRect and fillRect

For the first two examples there is also a small simplification.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.strokeStyle = "#000000";      // style for border
context.strokeRect(10, 10, 100, 100); // draw border of rectangle

context.fillStyle = "#FF0000";        // style for filling
context.fillRect(10, 10, 100, 100);   // draw colored rectangle

Instead of first defining a rectangle path and afterwards filling this path with color or trace this path with a line, you can also just use the functions strokeRect() and fillRect() doing the same and making the code smaller.

Drawing Circles

Last, we would like to see how to draw a circle. Again, the procedure is to first define a path which we can then customize with color and style.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.arc(100, 100, 50, 0, 2*Math.PI);  // x, y, r, start, stop
context.strokeStyle = "#000000";          // style for border
context.stroke();                         // draw border
context.fillStyle = "#FF0000";            // style for filling
context.fill();                           // draw filling

The path can be defined with the function arc(). The first two parameter is are the coordinates X and Y, the third parameter is the radius and the last parameter is beginning and ending of the circle. Accordingly, using 0 and 2*Math.PI, we are drawing the complete circle, but of course, it is also possible drawing circular arcs with using other values here.

You already know the lines you can see under arc() from our rectangle example. Those lines are caring about coloring the border and the filling.

Accordingly, this example is drawing a red circle with black border having the center in point 100/100 and a radius of 50 pixels.

Next Step: Writing Text on Canvas

After we have now drawn lines and objects, in the next chapter of this tutorial, we would like to see how to write some text onto the canvas.