Using HTML5 canvas

Unless you have been in a coma for the last couple of years you would have noticed the upturn in interest in HTML5 and the canvas tag.

The Canvas API is a means of creating shapes, graphs and even animation using just JavaScript and which, unlike Flash, doesn't require a plug-in and, unlike Flash again, is not proprietary but open.

Due to all the euphoria around HTML5 you may have come across list articles such as 48 Potential Flash-Killing Demos and 10 HTML5 Demos to Make You Forget About Flash, and which in their screaming hyperbole give the impression that all the cool kids hang out with HTML5 while Flash is the preferred technology for your senile, incontinent granddad.

But this is not the case. HTML5 canvas is still a juvenile cousin to a much more mature Flash. As Mozilla themselves admit on their own canvas guide:

Unfortunately the canvas element was never designed to be used in this way [to make animation] (unlike Flash) so there are limitations.

Probably the biggest limitation is that once a shape gets drawn it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

A user on Stack Overflow started a thread entitled Why is creating content with HTML5 Canvas much more complicated than authoring with Flash? with the following exasperated plea:

Hi, I've been doing Flash for couple of months and I love it. I can easily use a rectangle tool to draw a rectangle and do shape/motion tweening within seconds.

Lots of people are talking about HTML5 vs Flash nowadays and I took a look on HTML5 Canvas today. To my surprised, I see whole bunch of "code". It's so complicated, they need to make a lot of calls (fill, stroke, moveto, closepath etc...) to make a simple shape. And even dozens lines of code mixing with javascript to do a simple movement???

Am I missing something? It'll make animation 10x more complicated with HTML5 Canvas than Flash.

Read the answers to understand both the underlying differences between the two different technologies and reasons why Flash is still best for online animation.

Two problems for canvas at the moment are the lack of thorough tutorials and a decent library so as to allow more widespread access to the complicated animation features.

At the time of writing there is no one comprehensive book on the subject although a number are due to be released in 2011 including HTML5 Canvas by Steve and Jeff Fulton on the O'Reilly imprint (Send me a copy to review please!!).

Nevertheless despite these handicaps below are some ways that it can be used.

Create a rectangle with HTML5 canvas

The current development of the canvas API means that it is only possible to create rectangles or squares – all other shapes need to be made using paths.

The first and most important thing is to create the html:

<canvas id=”canvas-one” width=”400” height=”400”></canvas>

If no width or height is specified then the browser will fall back to a pre-defined size.

Every use of the canvas API must begin with calling the rendering context, which below is 2d:

var $canvas = document.getElementById(“canvas-one”);
var $cd = $canvas.getContext('2d');

Note that there is no 3d rendering yet.

If you are creating a rectangle shape you will need to first declare the colour of the body and specify the colour and width of the border:

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "5";

</pre>

<p>And now reference the above and create a rectangle:</p>

<pre><![CDATA[

$cd.fillRect(30,30,200,300);
$cd.strokeRect(30,30,200,300);

The values above are, from left to right, x coordinate, y coordinate, width in pixels and height.

Place all of the above in an object detection statement so that it looks like below:

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "5";

$cd.fillRect(30,30,200,300);
$cd.strokeRect(30,30,200,300);

} else {

    alert("Your browser does not support HTML5 canvas. Use a decent browser, douchebag");

}

This creates the following shape:

Image may be NSFW.
Clik here to view.

It is possible to delete all the canvas content by using the following line of code:

$cd.clearRect(0,0,$canvas.width,$canvas.height);

Or just:

$canvas.height = $canvas.width;

Create a face with HTML5 canvas

Now use some different methods and create a face like so:

Image may be NSFW.
Clik here to view.

Start off as before:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

$cd = $canvas.getContext('2d');

$cd.strokeStyle = "#000";
$cd.fillStyle = "#FFFF00";
$cd.lineWidth ="2";

// New code here

} else {

alert("Your browser does not support HTML5 canvas. Use something decent, douche bag");

}

To create a face you are going to need different shapes to represent the different parts.

You'll need to create a circle for the face shape. Unlike the previous rectangle you always begin creating a shape by calling the beginPath method:

$cd.beginPath();
$cd.arc(300,200,50,0,Math.PI*2, false);
$cd.fill();

The arc method creates a circle. The measurements, from left to right, are the x coordinate, the y coordinate, the radius size, the start angle, the end angle and whether it runs clockwise or anti-clockwise. Note how the mathematical formula PI is used to create a perfect circle.

Now for a mouth:

$cd.beginPath();
$cd.moveTo(270,210)
$cd.lineTo(330,210);
$cd.stroke();

Again, call the beginPath method before you create the shape. Here the straight line moves along the specified X and Y coordinates. MoveTo starts the line and lineTo is the next coordinate. By using more lineTo methods it is possible to create a myriad of different shapes.

Now add some more line paths to create the eyes and the final code looks like this:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "2";

    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.moveTo(270, 210)
    $cd.lineTo(330, 210);
    $cd.stroke();

    $cd.fillStyle = "#000";
    $cd.beginPath();
    $cd.arc(285, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.arc(315, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();


} else {

    alert("Your browser does not support HTML5 canvas. Use something decent, douche bag");

}

Note above how the colour isn't kept in a variable but needs to be changed as the document progresses.

Create a smiling face with HTML5 canvas

The face looks very glum so give him a smile by using the quadratic bezier curve method.

$cd.moveTo(270, 210);
$cd.quadraticCurveTo(300, 250, 330, 210);
$cd.stroke();

As always, moveTo is at the start. The measurements in the quadraticCurveTo, from left to right, are the first control point, the second control point, the x coordinate and the y coordinate. Just like using bezier curves in Illustrator, they are not easy to master.

Added with the rest of the code it looks as so:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "2";

    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.strokeStyle = "#000";
    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.stroke();

    $cd.moveTo(270, 210);
    $cd.quadraticCurveTo(300, 250, 330, 210);
    $cd.stroke();

    $cd.fillStyle = "#000";

    $cd.beginPath();
    $cd.arc(285, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.arc(315, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

} else {

    alert("Your browser does not support HTML5 canvas. Use something decent, douchebag");

}

Image may be NSFW.
Clik here to view.

Create random multiple circles with HTML5 canvas

Next, create this:

Image may be NSFW.
Clik here to view.

It is 5,000 little circles of varying size and colour and uses the methods already detailed above:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    for (i = 0; i <= 5000; i++) {

        $cd.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

        $cd.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

        $cd.lineWidth = "2";

        var $x = 150 + Math.floor(Math.random() * 150);
        var $y = 150 + Math.floor(Math.random() * 150);
        var $radius = 0.1 + Math.floor(Math.random() * 10);

        $cd.beginPath();
        $cd.arc($x, $y, $radius, 0, Math.PI * 2, true);

        $cd.stroke();
        $cd.fill();

    }
}

Create random multiple spots with HTML5 canvas

Finally, introducing the essential JavaScript method for animation and motion, setTimeout. This instructs the browser to re-run the function after the number of milliseconds specified:

var $canvas = document.getElementById('canvas-one'),
 $cd;
if ($canvas.getContext) {

    function create_spots() {

        $cd = $canvas.getContext('2d');

        for (i = 0; i <= 100; i++) {

            $cd.fillStyle = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 10) / 10 + ")";

            $cd.strokeStyle = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 10) / 10 + ")";

            var $x = 10 + Math.floor(Math.random() * 491);

            var $y = 10 + Math.floor(Math.random() * 491);

            var $radius = 0.1 + Math.floor(Math.random() * 2);

            $cd.beginPath();

            $cd.arc($x, $y, $radius, 0, Math.PI * 2, true);

            $cd.stroke();

            $cd.fill();

        } // End for loop
        setTimeout('create_spots()', 1000);

    } // end create spots functions
    create_spots();

The above code creates 100 multi-coloured spots every 1000 milliseconds: check it out here.

The truth is that apart from the famous website for Arcade Fire's The Wilderness Down, much of the current showcased HTML5 looks no more impressive than Java animation from 10 or 15 years ago.

Of course, this will change. The Canvas API will develop, browsers will become faster and more capable and the community of users around this HTML5 feature will grow and become stronger.

Hopefully, somebody will create a code library for canvas animation. Creating objects is cumbersome but straight forward; however, in order for the popularity of this particular HTML5 API to spread there needs to be easy access to animation features as you would find in jQuery or Mootools.

If you are interested in finding out more about canvas then read the following guides:

• Create great graphics with the HTML5 canvas
• Mozilla canvas tutorial
• Stories in Flight: HTML5 / CSS3 cheatsheet
• HTML5 Canvas Animation Overview
• HTML5 Canvas Tutorials
• Lets Call it a Draw(ing Surface) – Dive Into HTML5
• HTML5 canvas - the basics
• How to Use the Canvas and Draw Elements in HTML5
• HTML5 Canvas Element Guide