Does the canvas element make Flash irrelevant?

I have been working on a tutorial series that demonstrates how to make a simple platformer with JavaScript and the new Canvas element for the last few weeks, and inevitably one question comes up: is there any place left for Flash?

It’s true that the canvas element is an incredibly powerful addition to the HTML standard. With it you can display and interact with almost any visual object you can think of, using the same JavaScript that web developers have grown accustomed to over the years. But it is not (yet) in a position to displace Flash.

1. Support is not consistent

Ok, so HTML 5 isn’t an official standard just yet. But that hasn’t stopped the majority of browsers like Chrome, Firefox, Opera and Safari from implementing support for the canvas element. But the big omission, and a deal breaker at this point, is IE. The most popular browser out there has not official support for the canvas element, and projects like ExCanvas still only provide a subset of the canvas features provided by the other browsers.

Even then some functions like strokeText and fillText have inconsistent support. For example Firefox only supports these methods in version 3.5 of their browser (which is still in beta at this point).

By contrast there is a Flash player for almost every browser. The only thing a developer needs to do is make sure that the correct version of the plugin has been installed, and the Flash installation process is quite painless. Compare this to asking your users to install a whole new web browser...

2. JavaScript performance is not consistent

Even amongst those browsers that do support the canvas element, the performance difference of their JavaScript engines is huge. In my own testing, Chrome and Safari both had silky smooth performance, while Firefox 3 and Opera 9 appeared (and this is just a rough visual comparison) to only be around half as fast. Even if the performance of Firefox and Opera is not half that of Chrome and Safari, it is appreciably slower. While the new versions of these browsers promise improvements in their JavaScript engines, you still have to face the problems of users not updating their old browsers.

Flash performance is much more constant. I have heard some complaining that the performance of the Linux versions of the Flash players aren’t up to scratch, but as a developer you can be reasonably assured that the majority of your target audience will have consistent performance with their Flash players.

3. Library support and tools are lacking

If you are developing a Flash application and want to have your GUI slide around, fade in and out and bounce up and down you simply assign a few state transitions. While the canvas element can display all of these effects, you are going to have to write a lot of code to implement them yourself. I know the canvas element was never designed to be a GUI - HTML does that job just fine - but HTML doesn’t allow you to display the sort of effects that the RIA (Rich Internet Applications) show off so effortlessly.

Flash is both a development tool (through Flex) and an animation tool. If you want to create a RIA, you load up Flex Builder and start dropping GUI elements onto your form. Flash animators can import images and animate them against timelines with a minimum of code. It takes only minutes to get started thanks to the Adobe tools and IDEs available.

If you want to create an application using JavaScript and the canvas element, even just to respond to a mouse click, you are looking at writting a dozen lines of code. Having to write all the boilerplate code for handling events, creating HTML and loading resources makes JavaScript/Canvas applications a lot more intensive to develop.

I don’t see that Flash will lose any ground to the JavaScript/Canvas combo just yet. Flash tools are too polished, popular and easy to learn to make anyone want to jump ship. While the JavaScript/Canvas combo is powerful, developers don’t have the tools or 3rd party library support to make it a cost effective alternative.

(4,880 pts )