Steven Berridge

Web Developer

Canvas Basics

The Canvas Element

The canvas element, introduced with HTML5, is an area on which you can draw lines and various shapes programmatically using JavaScript.

To start using this element you must first add it to the HTML document, a canvas element is created like so:


	This is shown if the canvas element is not supported on the current browser.

It is possible to style the canvas element using CSS just like any other element in order to add things such as borders and backgrounds, but without JavaScript the element will do nothing but take up space on the page.

Getting some Context

To draw anything on the canvas you first have to get the drawing context.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

It is using this context object that you perform all drawing operations upon the canvas.

Drawing Rectangles

The most basic shape you can draw on the canvas is a rectangle, there are three different versions of the rectangle function that all do slightly different things. These are "fillRect", "strokeRect" and "clearRect".

All three functions take the same 4 parameters describing the position and size of the rectangle:

ctx.fillRect(x,y,width,height);
ctx.strokeRect(x,y,width,height);
ctx.clearRect(x,y,width,height);
x
The position across the X axis along the canvas, in pixels.
y
The position across the Y axis down the canvas, in pixels.
width
How many pixels wide the rectangle should be
height
How many pixels high the rectangle should be

Each function creates a different type of rectangle. fillRect creates a rectangle filled with a solid colour, strokeRect creates a bordered rectangle while clearRect acts like an eraser and removes everything from the canvas that it covers.

ctx.fillRect(30,30,50,50);
ctx.strokeRect(25,25,60,60);
ctx.clearRect(40,40,30,30);
Drawing Circles

Circles in canvas are a little tricky, they're made out of arcs and use radians to specify the starting and ending points of the arc.

Drawing circles requires the use of the arc function which takes six parameters.

ctx.arc(x,y,radius,start_angle,end_angle,direction);
x
The position across the X axis along the canvas, in pixels.
y
The position across the Y axis down the canvas, in pixels.
radius
The distance in pixels from the center of the circle to the edge.
start_angle
The angle in radians at which to begin the arc.
end_angle
The angle in radians at which to finish the arc.
direction
True or false value for clockwise or anti-clockwise.
ctx.beginPath()
ctx.arc(55,55,40,0,Math.PI*2,false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(55,55,50,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();

Simply using the arc function does not make an arc appear on the canvas, instead the arc function creates a "path" which must either be filled in or given a border, this is done by calling either the fill() or stroke() functions. It is usually good practise to begin a new path before creating your arc then once created the path should be closed, this is done to avoid joining paths together causing lines to appear between arcs.

More on Paths

As mentioned in the section on drawing arcs, it is possible to draw paths on the canvas which can later be filled in or stroked. As well as drawing arcs it is also possible to draw lines to create custom shapes and drawings.

To begin drawing a custom path the beginPath() function is used, you can then specify where you wish to begin drawing using the moveTo() function which takes two parameters.

ctx.beginPath();
ctx.moveTo(x,y);
x
The position across the X axis along the canvas, in pixels.
y
The position across the Y axis down the canvas, in pixels.

There are a number of different functions that can be used to define your path, the simplest of which is the lineTo() function which simply defines a straight line to a specific point. The lineTo() function takes the same two parameters as the moveTo() function, simply specifying the x and y coordinates of where the line is to be drawn to.

ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();

It is also possible to draw curved paths using the quadratic and bezier functions. These use 'control points' to define where the line curves, and how steep that curve is.

The first function, quadraticCurveTo, uses a single control point and is used like so.

ctx.quadraticCurveTo(cx,cy,x,y);
cx
Control point position on the X axis
cy
Control point position on the Y acis
x
Ending X axis coordinate.
y
Ending Y axis coordinate.
ctx.beginPath();
ctx.moveTo(10,10);
ctx.quadraticCurveTo(100,10,50,50);
ctx.quadraticCurveTo(10,100,100,100);
ctx.stroke();

The above example shows two quadratic curves one after the other, it has been created with the control points drawn in to make it easier to visualise how they are affecting the curve of the lines.

The second function, bezierCurveTo, is identical to quadraticCurveTo except their are two control points.

ctx.bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
c1x
First control point position on the X axis
c1y
First control point position on the Y acis
c2x
Second control point position on the X axis
c2y
Second control point position on the Y acis
x
Ending X axis coordinate.
y
Ending Y axis coordinate.
ctx.beginPath();
ctx.moveTo(10,10);
ctx.bezierCurveTo(100,10,10,100,100,100);
ctx.stroke();

As you can see, by using bezier curves you can easily create a line curving in multiple directions. The example above has been created with the control points drawn in to make it easier to visualise how the two control points affect the line.