Old dog, new tricks?
Canvas is an SGML based graphic language – however it is by no means the first SGML SVG, some of you will remember VRML that was around in the mid to late ’90s. If you remember VRML you’ll know how well that turned out.
3-5 years for browser support to reach a level that allows real world usage of HTML 5 + Canvas. Sure us tech heads love jumping onto the latest and greatest browser and it’s support for the latest cutting edge technologies. Most users, don’t. Most big companies don’t. And remember most Government systems, banking systems, etc are still using Internet Explorer 6 and some are even still running IE 5.
If there is one thing that Browsers can agree on, it is to disagree. Each browser implements their technologies differently. Always have and always will. Even W3C strict standards based technologies get implemented differently. Even the exact same verison of a browser on Windows may have inconsistencies when compared to the same browser on a Macintosh. It’s about time us web developers got used to the fact that “browser standardisation” is .
Flash major flaw is also it’s major strength – it is a plug-in, a browser component so it must be installed seperatley in each browser implementation (or packaged with the brwosers by default) which can be a pain. However because Flash is run through, propietry player it is all but standardised across all browsers and operating systems.
SVG is a Vector graphic format, it is therefore quite processor intensive. Flash has overcome many of the hurdles of Vector based animation through years of development and by recently introducing hardware acceleration to it’s Flash Player. Canvas faces the same potential performance problems however it is up to each indepent browser vendor to implement it’s own opimistion and hardware acceleration meaning Canvas applications will run faster on some browsers, then others.
HTML 5 based image editors – visual image editors such as Photoshop that output to Canvas
Writing Canvas based code is very difficult. Lets take a look at a sample rectangle in Canvas:
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
To do the same thing in Flash you can either write the ActionScript to create the rectangle, which in actual fact looks quite similar to the JavaScirpt component of Canvas example. However, you can also just open up your Flash editor, grab the rectangle tool, pick a color and draw it onto the Stage.
What the Flash editor is doing is essentially creating the ActionScript (or more correctly the MXML) for you.
Until a few “WYSIWIG” style image editors come out with Canvas support (a future Photoshop Save to web option perhaps?) we will not see complex interfaces created with Canvas. 7 lines of code to create a simple colors rectangle with no animation or interactivity is a lot to write. Creating an entire interface in this way would be impossible.
Canvas is a nice new technology to have in the toolkit, although a lot of the hype surrounding it at present is unfounded as real world corss-browser implementation of the Standard is sitll a long way off. Flash is a powerful technology with over 15 years of development behind it, 99% browser and market penetration and the worldwide multimedia leader Adobe behind it. Will Canvas replace Flash? No.