In the beginning designers and developers were intrigued when they learned that HTML5 offered something called Canvas, which is a low level language that allows browsers to support vector graphics, motion, paths, rendering text, copying images and video, manipulating pixels and more. It was an open source alternative to Flash, which sounded great. But to say Canvas was a mixed bag is being kind. It had many limitations that made it less than an ideal choice for most. But when Steve Jobs, Google and Microsoft later sanctioned it, it changed the game and caused some to reconsider whether the time had come to pick it back up and take it for a spin. No Flash or SVG on the iPhone is reason enough to take a closer look at where things stand, because there have been constant developments for Canvas. After recent advances, is it now worth using?
Starting off on the Wrong Foot
Let’s take a look at what Canvas brings to the table. No longer are HTML developers stuck using blinking text when they want animation! Throw away mooTools and Flash, because Canvas is the answer to your interactive prayers. Right? No. Canvas will not be able to compete with Flash any time soon. Flash can bring Canvas to the wrestling mat with a reverse pile driver in most instances. The computing power required of your browser will not allow Canvas to do all that much. We must limit our expectations right out of the gate, but it does have pratical uses. Anyhow, here are some examples that are touted to be “ridiculously impressive”:
net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/
If you think that is ridiculously impressive, you probably also play Combat on your Atari 2600 and think it’s pure visual magic. The showcase looks like Flash from ten years ago, which is seventy years in dog terms. Even a pure jQuery / PhotoShop tag team can get you further, although admittedly the image file sizes will be bigger. You also won’t require any emergency scripting for older IE browsers. And all of this is I learned the hard way. I test drove one of my Flash presentations after conversion into Canvas. With the help of a friend, we ported it over using a JavaScript shorthand plugin he created, and while his tool kit did work and the coding time was fairly quick, the browser was slow as molasses when rendering my vector based movie. Honestly, I’m surprised my computer didn’t erupt in a fiery mushroom cloud ten seconds in. The frame rate is just miserable when the page uses more than a just few moving visual assets, or actors.
If you are looking to draw simple images or do very simple animations, Canvas can do it. Too many moving parts means you better had better be fine with deplorable frame rates. If you are thinking about making complex interactive movies, interfaces or animation, I should stop you right here. Canvas might perform better once newer browsers come along with more horsepower devoted to the task, but right now I’d look to Flash, maybe Silverlight if you are a glutton for punishment, but Canvas is not a good option.
Gimme My Pen Tool
Let’s talk a little about the vector art in Canvas. Vector art is of course smaller in file size than raster art and scales nicely. That’s why Illustrator is a vital tool for many designers and why Flash files can stay so lean. Well, Canvas has more than a few issues here. First of all, drawing simple objects like a circle or a box requires a surprising amount of code. Illustrator and Flash objects contain similar code but the artist never has to look at. Canvas has no drawing board or tools, so many designers are not going to be very pleased. So far Canvas is not making my life any easier, it’s making it harder. Now imagine I need a more complex object, like a cartoon character that requires some points and curves. Canvas does support Bezier curves, but get a load of the steps required for two anchor points:
www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
That looks a lot like what makes Silverlight such a tedious piece of junk. Designers and developers are a deadline driven bunch, and I want, no, I need to draw Bezier curves in under three seconds without being ground to a screeching halt in order to grab the four x/y coordinates for each curve in some other application. This is not efficient, so we are going to have to grab these coordinates from another app like illustrator and then add them to our scripting in order to use them in Canvas. All I can say is ugh. Until there is a Firefox app allows us to complete this task as easily as Adobe Illustrator, I will not be partaking in this lesson in futility.
So let’s instead bring our actors from another drawing app. This is what I did, and since there is no drag and drop, no WYSIWYG action for creating Bezier paths, and easing controls that I simply punch a number into, you are stuck building it all programmatically. Very slow when you need things to snap to point, and synching sound or music is not an option. The window of opportunity to use Canvas is a small window indeed.
We do have one more choice here: if you have your heart set on using complex vector images in Canvas, and you are reasonable enough to see that calculating bezier curve coordinates point by point is too labor intensive to make sense, there is a solution available. As of writing this I haven't tried it out yet, but in theory it look like a great idea. This app should allow Adobe Illustrator users to convert their images to pure Canvas code. That said, converting an image with thousands of control points is not going to be happy fun time for your browser:
visitmix.com: Ai2Canvas
Browser support
Basic support is ok, but Internet Explorer does need an extra library . Firefox is fine for everything starting at version 3, Safari at 3.0, Chrome at 1.0, iPhone and Android were fine right out of the gates. The use of radial gradients will require IE9 or greater.
Mobile devices a possibility
Flash was not invited to the iPhone party. Even SVG was given the brush off. Here is our shining moment! If you have something pretty light as far as animation, and you need it for mobile devices, then Canvas might actually make sense. JavaScript languages like jQuery can move images, so developers with skills heavy in this or mooTools could get by just fine without Canvas, so its up to you.
Interactive Charts
Flash was not invited to the iPhone party. Even SVG was given the brush off. Here is our shining moment! If you have something pretty light as far as animation, and you need it for mobile devices, then Canvas might actually make sense. jQuery is also alright if we don’t need vector/scalable art, btw, so you are not stuck using Canvas.
Conclusion
You know what ? Let’s try and polish this thing – no need to be a downer. Simple animation and scalable graphics via Canvas is a good fit for mobile devices. And I bet a Canvas project would look pretty good on a young front end developer’s resume. We’re not really at a point where employers are going to beat down your door with more Canvas projects, but it would show you have some versatility, and the ability to pick up new technologies, and things could change. But who else needs this trick in their quiver? Not many.
Some new advances show promise, and some kits tools have made things a bit easier on the coding end, so the engine of progress has not stalled , but browser performance is still a major hindrance to Canvas’s relevance. It is not an all-in-one solution, at least for anyone who needs more drawing tools than simple shapes and gradients, so I am not feeling the love. Yet. But I’ll keep checking back every six months to a year, and you should too. One day this thing might make sense.
Resources:
Canvas Cheatsheet
renderToCanvas: Off-Screen Rendering (good to use when Canvas has to do complex drawing)
Comparison of layout engines (HTML5 Canvas)