Introduction to canvas

The main purpose of canvas element is to manipulate 2d graphics or create them from scratch, rather than simply embedding existing media like what the audio and video elements do. It creates a drawing surface within an HTML document and exposes a powerful drawing API also known as the 2d rendering context. The <canvas> element together with its JavaScript API is capable of doing some pretty amazing stuff such as :

  • Creating dynamic graphics and animations that react to user interaction, e.g. in games.
  • data visualizations and graphs which update on the fly.
  • a User-Interface for a web application (though its inadvisable).

The <canvas> was first introduced by Apple for creating dashboard widgets in Safari 1.3, and is supported by Firefox form version 1.5 upwards, Opera from version 9 upwards and all versions of Chrome. The <canvas> tag is not supported by IE before IE 9.

Most of the Canvas drawing API is not defined on the <canvas> element itself but on a “drawing context object exposed by getContext() method of the canvas. The getContext() is called with the argument “2d” to obtain a CanvasRenderingContext2D object that can be used to draw two-dimensional graphics into the canvas.

Take note that the canvas element and its context object are two different objects.

A green square:
<canvas id="square" width=10 height=10></canvas> and a red circle:
<canvas id="circle" width=10 height=10></canvas>.

// Get the first canvas element by Id and its "2d" context
var canvas = document.getElementById("square"); 
var context = canvas.getContext("2d");

// Set fill style to green and draw a square (equal sided rectangle)
context.fillStyle = "#0f0";

// Get the second canvas element by Id and its "2d" context
canvas = document.getElementById("circle");
context = canvas.getContext("2d");

// Begin a path and draw a circle of radius 5.
context.arc(5, 5, 5, 0, 2*Math.PI, true);
context.fillStyle = "#f00"; // Set green fill
context.fill(); // Fill the path

The result will be as shown below:


As you can see from the example above, we started by creating two canvas tags, one with id “square” and the other with id “circle” in html. Next we assign the canvas element to canvas variable in javascript using var canvas = document.getElementById("square");. After that, we get the “2d” context of the canvas and use it to draw our shapes.

Getting to know the canvas element

The <canvas> element requires no external plugin to use it. All you need is to know the basics of HTML 5 and JavaScript. Lets see another example on how to add the canvas element on an HTML 5 page.

<!DOCTYPE html>



<style type="text/css">



<canvas id="canvas1" width="200" height="200"> 
 <!-- Insert fallback content here --> 


The result will be as shown below:


Lets dissect the example:

  1. I used the CSS id selector to set the background colour of my canvas element to “aqua” to make it visible on a white background. Without this you would see nothing because the default colour of the canvas would be white, on a white webpage.
  2. The height and width attributes of the canvas element can be set just like for any other HTML element. These attributes define the size of the canvas element, which then define the size of the 2d rendering context. Without these attributes the canvas element and the 2d rendering context would be set to the default width of 300 and height of 150.
  3. The canvas tag is placed in the body of an HTML document (the visible part of the document).
  4. In between the opening <canvas> tag and the closing </canvas> tag can be placed the fallback content that is shown it by any reason the canvas is by any reason not supported.

Getting to know the “2d rendering context”

The canvas element is not the fantastic part of canvas. Its the 2d rendering context, that’s the awesome object that you draw everything onto. You really have to understand that you draw on the 2d rendering context, not on the canvas element. The canvas element is where you access and display the 2d rendering context through.

The 2d rendering context is accessed through the canvas as follows: var context = canvas.getContext("2d");

The canvas coordinate system

Positions of objects drawn on canvas are defined by a coordinate system. To understand how you can position objects on canvas, it is important to understand the canvas coordinate system which is a bit different from the usual Cartesian system of coordinates in mathematics.

In mathematics (coordinate geometry), the x-axis coordinates run from left to right, and the y-axis coordinates runs from bottom to top.

In canvas, the y-axis coordinates run in the opposite direction, from top to bottom and the origin is in the top-left corner as shown by the diagram below:

Canvas coordinates