There's been a buzz around HTML5 for some time now with many leading commentators in the online tech community heavily pushing the new standard.
With the last version of HTML being released back in 1997 and XHMTL never really fulling its initial promises, a new version is needed that reflects the exhilarating pace of technological change and in particular meets the needs of the new platforms such as mobile and tablets.
And some of the biggest web opinion formers and industrial heavyweights are HTML5 evangelists.
When in 2010 Steve Jobs published a demolition job of Adobe's animation software in an article entitled “Thoughts on Flash”, it brought a lot of focus to the maturing standard:
Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.
When the boss of Apple Inc. makes announcements like above then every developer should sit up and listen.
Image reproduced with kind permission from Phil Banks.Twitter: https://twitter.com/#!/emirpprime; Website: http://stickmanphotography.co.uk/
The other great commercial tech player, Microsoft, has also thrown their immense weight behind HTML5 with Vice President Julie Larson-Green recently announcing their intention to focus on the new format for their Windows 8 developer platform.
When I wrote an introduction to HTML5 Canvas at the beginning of the year I noted how limited the new technology is with a big block to uptake being the prohibitive low-end, verbose coding, especially when compared to ActionScript.
I finished the article with this paragraph:
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.
In this article I will examine a number of HTML5 canvas libraries. This is mainly a usability review and I won't examine the code too closely, but I also wanted to create some solid code examples with supporting comments as an aid to other developers interested in using these projects.
The projects reviewed are jCanvaScript, CAKE, fabric.js and doodle.js
If you do want to try these scripts out then you really need knowledge of vanilla JavaScript. If your only experience is through a package like jQuery or Mootools then you'll struggle when attempting to use any of these tools.
I should firstly state that they are all competent libraries but some are more ready for wider adoption than others, in particular a couple have a lack of documentation and working demos.
They are all open source and are issued under liberal licenses that allow integration into commercial projects. Also note that all the libraries featured are being regularly updated by their respective developers.
jCanvaScript
Alexander Savin is the prime mover behind this library released under the MIT and GPL2 licenses. The jCanvaScript beta was launched at the beginning of 2011 and several versions have since been released.
The features of this library are the main planks of HTML5 canvas: the ability to create shapes, animation, images and text and to animate them and also allowing user interactivity via the mouse or keyboard.
To use jCanvaScript you first need to create the jc object and from their you can access its methods. The code below creates a white circle 100px wide positioned 150px from the left and 250px from the top of the canvas:
jc.start("canvas_1");
jc.circle({
x: 150,
y: 250,
radius: 100,
color: '#ffffff',
fill: 1
});
The above method uses literal notation but it's also possible to use shorthand like so:
jc.circle(150.250.100,'#ffffff',true);
I prefer to use the more robust literal notation where ever possible, that way the objects are labelled and are also self documenting which serves a similar purpose to code comments.
The documentation for jCanvaScript is excellent with clear examples of both functions and objects given. I would state that it would take a day to master the entire library.
An example of animation is as below:
jc.start('canvas_1', 160);
jc.circle({
x: 90,
y: 500,
radius: 150,
color: 'rgb(255,241,12)',
fill: 1
}).animate({
x: 500,
y: 90
}, 100, {
type: 'in',
fn: 'linear'
}).fadeOut(100, {
type: 'in',
fn: 'linear'
});
The second parameter in jc.start is frames per second. It's possible to join the methods together – in the above example animation and fadeOut are added to circle object. Anybody familiar with a common JavaScript library will be familiar with this syntax. The use of object notation for animation reminds me of Dojo.
I was using setTimeout to repeat the animation but I found it confusing to compare the FPS of the library code with the milliseconds of setTimeout, but that's says more about my skills than the library.
Click on here to see a jCanvaScript demo.
Compressed, the script weighs 50kB.
Fabric.js
Released under a MIT license fabric.js is the work of former Prototype developer Juriy Zaytsev - aka kangax - that grew from a commercial project he was engaged in.
The first commit on GitHub dates from the summer of 2010 and since then the principle coder has been regularly expanding and revising the script.
Fabric.js is a far more feature rich offering than jCanvaScript. Included in the hefty download file is an SVG-to-canvas parser, unit testing and even limited IE support through Explorer Canvas.
Below is how to use fabric.js to create a red triangle 200px by 200px in size:
// create the canvas object
$canvas = new fabric.Canvas('canvas_1');
// create a triangle
$triangle = new fabric.Triangle({
top: 450,
left: 500,
width: 200,
height: 200,
fill: 'rgb(204,0,107)'
});
// add it to the canvas
$canvas.add($triangle);
The quality of the code is fantastic – it's more like looking at art; but the entry point for interested users is too high.
The documentation is minimal or non-existent with the technical manual being impenetrable for those not already familiar with the code. For instance, could you work out how to create a gradient from the information on this page?. No, neither could I and as there isn't a live example to study this makes matters especially problematic. An API reference is important – but there needs to more than just that.
The are some live demos but too few of them – there needs to be examples of every type of class / shape. Of those that exist none feature crucial code commenting as this animation page highlights.
It looks promising as feature-rich HTML5 canvas Swiss army knife, but there's too many unnecessary barriers that will prevent wider adoption.
Click on here to see a fabric.js demo
CAKE
Written principally by Google employee Ilmari Heikkinen CAKE is, in a description from the homepage, “a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.”
Ilmari is a regularly contributor to HTML5 Rocks and has a host of HTML5 related projects under his belt.
Unlike all the other libraries reviewed in this post, CAKE actually has a number of comprehensive online tutorials. Written by Matthew Casperson they cover both a basic introduction and more complex animation.
The code below is how to create a yellow circle 150px wide with a 20px border stroke.
var $canvas, $circle;
$canvas = new Canvas(document.getElementById("code"), 600, 400);
$circle = new Circle(150, {
x: 200,
y: 200,
fill: 'rgb(0,147,211)',
stroke: 'rgb(255,241,12)',
strokeWidth: 20,
endAngle: Math.PI * 2
});
$canvas.append($circle);
Notice that with CAKE you create the HTML element first – declared above to be the child of “code” and 600 x 400 – rather than reference an already existing one.
Also note the value for endAngle – ouch. A library should avoid the use of radians for creating basic shapes.
Beyond the Casperson tutorials there a number of working demos: a simple introduction and a serious of full-on examples.
There is also some limited documentation on the home page.
The whole point of creating a HTML Canvas library is to create an accessible entry point for developers. CAKE fails to do that. While there are a number of clear tutorials, CAKE has an over-reliance on geometry for even basic functionality. While this can't be avoided altogether (see the conclusion) it should be minimalised.
It's just far too low level for a library – I laughed at the complexity of some of the coding examples.
Finn Ilmari Heikkinen is clearly a coding genius but he's left most of us behind with CAKE.
Click here to see a demo of CAKE.
Doodle.js
Doodle.js takes a totally different approach to all the other libraries presented here in that it doesn't try to fit in with either JavaScript or the Canvas API but instead mimics ActionScript.
It's an original take on Canvas and one worthy of further inspection.
Billy Lamberta together with Keith Peters created the library for their forthcoming book Foundation HTML5 Animation with JavaScript [edit: this wrong. See comments]. The premise behind the project is that it will be of assistance to Flash developers who are interested in using HTML5.
This is how you create a circle with doodle.js:
// declare variables
var $canvas, $element, $circle;
//dom block element wrapper
$element = doodle.createDisplay("canvas");
//creates new canvas element wrapper
$canvas = $element.createLayer();
$circle = doodle.createSprite();
$circle.graphics.beginFill(0xfff10c);
$circle.graphics.circle(0, 0, 150);
$circle.graphics.endFill();
$circle.x = $element.width / 2;
$circle.y = $element.height / 2;
$canvas.addChild($circle);
The breadth of coding demos attached to doodle.js is easily the most thorough of all the other libraries reviewed. By studying the code you'll be able to create smooth up and down motion, make the object follow the mouse and even create complex 3d shapes.
Doodle.js also has the most complex API reference of the lot.
As it's a relatively new project and built to coincide with the release of a yet to be published book, hardly any attention has been given to doodle.js from the wider developer community. But don't let that put you off from trying it out. It's one to watch.
Click on here to see a demo of doodle.js.
Conclusion
Due to time restrictions none of the above are complete reviews but I hope they gave you a flavour of what to expect if you try either jCanvaScript, fabric.js, doodle.js or CAKE.
There are a number of other Canvas projects out there such as Gury, HTML5 Canvas Library and MooTools Canvas Library but they are either too fresh or too stagnant to be worthy of review.
From my investigation all have elements which are commendable but all are far from being complete, rounded libraries.
Many coders have been spoilt by JavaScript libraries such as jQuery and Dojo over the last few years. The ease of creating animation means no more than adding slideUp() or slideDown() at the end of a coding chain.
These are at such a high-level that they bear no resemblance whatsoever to the underlying JavaScript that creates these methods.
jCanvaScript attempts to follow this path and because of that it is easy learn. However, as we look to using the Canvas API for more complex purposes other than fade in and out or horizontal linear movement, more full code will be required – complex animation will require complex code.
Sure, a library will assist in this process but it will require a deeper understanding by the developer of programming techniques that use geometry calculations.
For that reason, I really don't see how jCanvaScript can produce the sort of necessarily complex animation such as this and this (created with doodle.js).
So for now perhaps doodle.js edges in front of the others but fabric.js could be a serious contender if usability issues are addressed.
If you have tried any of the above then please feel free to add your thoughts below.