To start using this element you must first add it to the HTML document, a canvas element is created like so:
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.
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);
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);
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.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
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.
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.
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.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.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.