HTML5 has answered many of the problems faced by modern web developers with the introduction of a myriad of new tools for them to play with. One of the most important, and exciting components of the HTML5 toolkit is undoubtedly the tag. Reputed by some as the “Flash Killer”, the tag allows developers to incorporate interactive graphics and animations into their web applications. It paves the way for innovations in web design having already been incorporated into some pioneering websites, and has been adopted by many game designers to produce some remarkable games.
Canvas was actually created by Apple to create their Dashboard widgets, and was subsequently adopted by other browsers following its inclusion in Apple’s WebKit framework. Support for it is therefore present in all modern browsers with the exception of IE8 and below, although there are Javascript libraries that developers can download to emulate functionality in browsers that aren’t equipped for it.
Although is an HTML tag it’s entirely dependent on its accompanying Javascript API, and therefore to manipulate the object some knowledge of Javascript is required. This basic introduction will demonstrate the ability to draw geometrical shapes, create custom paths, and eventually fill them with colours and gradients using the new Javascript functions that come with HTML5.
The HTML tag for the canvas object is straight forward, simply place it in your code as you would any other element, give it an ID and define its dimensions. The following line creates a canvas object named “theCanvas”, with a width and height of 300 pixels:
Here comes the Javascript
To draw in the canvas you need to create a Javascript object which references the canvas’ 2D rendering context, but first you need to create a Javascript reference to the canvas object itself. The following line creates a reference to the HTML object “theCanvas”:
{code type=codetype}
var canvas = document.getElementById(“theCanvas”);
{/code}
The following line creates a reference to the canvas’ 2D rendering context:
{code type=codetype}
var context = canvas.getContext(“2d”);
{/code}
Now that you have the context reference you can start drawing to your canvas using canvas’ Javascript API reference. The following line, for example, creates a rectangle and fills it black:
{code type=codetype}
context.fillRect(50, 25, 150, 100);
{/code}
You can also create basic lines. The following code creates a short horizontal line starting at coordinates x = 20, y = 50 to x = 100, y = 50:
{code type=codetype}
context.moveTo(20,50);
context.lineTo(100,50);
context.stroke();
{/code}
Here’s an explanation of the above code. First you need to move to your starting position using context.moveTo, then map the line to the next position by calling context.lineTo, finally context.stroke draws the line to the screen. Hopefully that’s fairly easy to follow.
Now lets try a more complex drawing, and given that it was Valentine’s day last week I thought a heart would be appropriate. So we’ve got our canvas and context references, and for this section I’m going to introduce a new API function, namely bezierCurveTo which we’ll use to create the curves of our heart shape. We’ll draw each half separately. First move the starting point to 100, 80 and call bezierCurveTo to map the curve (remember, nothing is actually drawn to the screen until stroke() is called).
{code type=codetype}
context.beginPath();
context.moveTo(100,80);
context.bezierCurveTo(20,1,-50,100,100,200);
{/code}
Next place the starting point back at 100, 80, and draw the second curve
{code type=codetype}
context.moveTo(100,80);
context.bezierCurveTo(180,1,250,100,100,200);
{/code}
Now for the stroke, to which I’ve also applied a strokeStyle which simply tells canvas to draw the stroke using a shade of red instead of the default black.
{code type=codetype}
context.strokeStyle = “#780000″;
context.stroke();
{/code}
If you view the page in a supporting browser you should now see the outline of heart.
To finish it off we’re going to add our “fill”. For the “fill” I chose a basic gradient, which is created by setting up a “fillStyle”. The following code creates the gradient and applies it to the fillStyle, then finally calls fill which applies the gradient to the canvas.
{code type=codetype}
var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, “#780000″);
my_gradient.addColorStop(1, “#c30000″);
context.fillStyle = my_gradient;
context.fill();
{/code}
That’s it. Viewing the page in a browser you should now see the following heart shape.
