Educating Students in the 21st Century
Middle School Lessons
High School Lessons
Acrylic Painting Computer Art
Installation Art
Mixed Media
Oil Painting

Flash vs. HTML5's Canvas
Apple's hard nosed stance against allowing Flash on the iPhone/iPodTouch/iPad has brought the Flash vs. HTML5 debate into the forefront. Many people have marked this the end of Flash as we know it. Adobe (for obvious reasons) thinks this is very shortsighted and I tend to agree.

Most people focus on the new <video> HTML5 tag as the nail in Flash's coffin. I think it's pretty obvious that those people do not recognize how much more Flash does than play YouTube videos. I use it for application development almost daily at work and I consider myself fairly fluent in its strengths and weaknesses.

The key part of HTML5 that competes with the application side of what Flash does is the <canvas> tag. It allows for javascript to manipulate a bitmap image of sorts. Interestingly enough, when something is running in a canvas you can right click and 'View Image' at any time and it will give you a screengrab of whatever was going on.

So, armed with my initial research into basic javascript/canvas programming, I set out to compare performance between it and Flash. I created two simple apps, one focused on bitmap manipulation and one focused on sprite manipulation. I then recreated these javascript/canvas scripts in Flash, making them as close to identical as possible. This was actually fairly easy given that Flash ActionScript 3 is based on javascript. Each script runs for 300 frames and then calculates the average framerate.

Armed with these tools, I then set out to examine the performance across different browsers. All of these tests were done on my MacBook Pro (2.33 GHz Core 2 Duo). The results are below.

Firefox 3.5.7
Bitmap Test (Flash) - 28 fps
Bitmap Test (HTML5) - 16 fps
Sprite Test (Flash) - 51 fps
Sprite Test (HTML5) - 18 fps

Chrome (35163) beta
Bitmap Test (Flash) - 27 fps
Bitmap Test (HTML5) - 32 fps
Sprite Test (Flash) - 48 fps
Sprite Test (HTML5) - 38 fps

Safari 4.0.4 (6531.21.10)
Bitmap Test (Flash) - 24 fps
Bitmap Test (HTML5) - 23 fps
Sprite Test (Flash) - 44 fps
Sprite Test (HTML5) - 46 fps

If you would like to run the tests on your own setup, here are some links to them.

Bitmap Test (Flash)
Bitmap Test (HTML5)
Sprite Test (Flash)
Sprite Test (HTML5)

I found the results of these tests extremely interesting. Probably the most important conclusion to draw here is the drastic difference in javascript/HTML5 performance between Firefox and Chrome or Safari. As a developer, this is red flag number one. One thing that makes Flash development wonderful is that it is a stable platform across all browsers. Anyone who has coded a website before knows the pains involved with trying to make everything look the same across all browsers. The thought of having to worry about making a rich multimedia application perform the same in all browsers makes my stomach churn.

You'll notice that Flash is relatively constant across all platforms, except for a slight drop-off on Safari. The reason for that is an argument for another post. Apple claims it's because Adobe can't make a stable plug-in. Adobe claims it's because Apple won't give them the necessary API access to optimize it. I'll let you be the judge on who is more correct.

The results get more interesting as you look deeper though. Firstly, Flash eats HTML5's lunch on Firefox. There's no argument there. On Chrome, HTML5 is actually slightly more efficient when it comes to bitmap manipulation and slightly less efficient when it comes to sprite usage. On Safari, it's a dead heat in both categories.

To further the investigation I thought it was worth seeing just how fast javascript is at doing some basic math. I ran another test that does 250 thousand divisions per frame, just to see what would happen.

Firefox 3.5.7
Division Test (Flash) - 25 fps
Division Test (Javascript) - 14 fps

Chrome (35163) beta
Division Test (Flash) - 23 fps
Division Test (Javascript) - 53 fps

Safari 4.0.4 (6531.21.10)
Division Test (Flash) - 25 fps
Division Test (Javascript) - 16 fps

Here are the links to those tests.

Division Test (Flash)
Division Test (Javascript)

These results intrigued me even more. As you can see, on a pure javascript level, Chrome blows the doors off of both Firefox and Safari. This lends even more proof to the red flag discussed earlier, that developers will not be able to count on their HTML5 based apps running at the same rate in different browsers. Even more disheartening is the fact that this is just javascript, which has been around for years. If some of the major browsers haven't spent the time improving their efficiency on this front yet, why should we expect them to any time soon?

Overall, I think these test prove two things:

1. The HTML5 method toward developing multimedia web applications has a lot of potential and Chrome can run them like a champ.

2. Flash isn't going anywhere.

Performance stability across platforms is one of the most sought after results for any web application. It is priority number one for developers and quality assurance testers alike. It's incredibly frustrating to have to run your application across over a dozen browser/operating system combinations while testing. While not perfect, Flash eliminates a significant portion of that frustration. Developers will not be flocking to HTML5 when they can use a cross-browser plugin with over 90% penetration.

While Flash may never run on the iPhone platform, it will stay in you desktop/laptop browsers for a long time. Don't forget, Internet video didn't make Flash popular. Flash made Internet video popular.
By Mike on February 11, 2010 at 2:11pm EST Topic(s): programming flash html5 canvas apple adobe

Avatar (URL):
Website (URL):
Are you a robot?
Are you a person?

Log In

Popular Topics
oil painting (10)
middle school lessons (7)
2004 (7)
high school lessons (6)
painting (6)
2007 (5)
mixed media (5)
2010 (5)
3d (4)
2008 (4)

Recent Comments
Educator and Artist
For a limited time we have lowered the r...
Scholastic Art Awards 2010
Scholastic Art Awards 2010
Educator and Artist
Educator and Artist

+ 2008
+ 2009
+ 2010
+ 2011
+ 2013