ScottKing.com.au

HTML 5 & Canvas vs Flash

by on Jun.25, 2010, under Misc

A few friends of have asked my thoughts on HTML 5 and posing questions such as “Will HTML 5 replace Flash”. Firstly, HTML 5 is simply a new markup, it will replace HTML 4. Canvas is the SVG graphics technology that will enable HTML 5 and JavaScript to create rich and dynamic graphic, much like Flash, native in the browser.

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.

Browser Penetration
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.

Browser Compatibility
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.

Hardware Acceleration
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:

HTML Mark-up:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

JavaScirpt:

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.

Community
For Canvas to be successfull it must be adopted by a strong community of developers. I have no doubt that we will see JavaScript libraries to manipulate Canvas – animation packages, Tween packages, colorisation and the likes developed and released to the development community. But these things take time. There have been plenty of promising web technologies come and go. However, given it’s adoption by most major browser vendors and the hype surrounding Canvas it appears it will be with us for some time.

Conclusion
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.

http://en.wikipedia.org/wiki/Canvas_element

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

http://en.wikipedia.org/wiki/VRML

http://en.wikipedia.org/wiki/MXML

No comments for this entry yet...

Leave a Reply

You must be logged in to post a comment.

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...