If you have not yet heard the big news, Internet Explorer 9 is shipping with Canvas support! Also with <Video>, <Audio> WOFF Fonts and tons other other HTML5 goodness. Being a huge fan of <Canvas> I jumped straight in to the IE9 Preview to take the IE demos for a test-drive. For some unknown reason, the first of the Microsoft script demos I tried threw me a wonderful: “Script Error”. “Oh great!” I thought, “IE9’s Canvas is going to suck!”
Frustrated, I hit CTRL+F5 to refresh. “Whoa. Déjà vu.” I could have sworn a black cat went past us, and then another that looked just like it… the demo started working.
Boxes… all over my <M$canvas>! I could almost not believe what I was seeing, and checked the Title Bar of the Window. Yes… it really was Internet Explorer, was I dreaming? (pinch-test) No! In my excitement, I hit the notoriously dangerous streets of South Boston, on a mission to find a can of Tab Clear with which to celebrate the arrival of the year 2003.
Not everyone was excited about IE9 supporting Canvas, but then the performance gains of lower-level architecture and the rich synthesis of such closely complimentary web technologies are not going to be everybody’s cup of tea. Sure, but I was excited: I had been loving the blogging, emailing and filing bugs on Microsoft Connect long-time.
And the IE Canvas has been a long-time coming, it was originally unleashed by the Borg… oops I mean… “Apple”… back in 2003. Seven-ish years (if you can really call it like that) is a big hunk of time for a browser vendor to keep the people waiting, even if you do take into account the patent & spec issues that slowed the whole process down. While it may have been a slow step forward, such a colossal mass of corporate-browser-dom being beaten into shape by the Open-Web is certainly a giant-leap forward for Web-kind.
To all the IE developers who have clearly worked so hard over the past year, I think congratulations are in order. In my opinion… you done good. I have been futzing around with the IE9 Preview-3 for the last 24 hours, and while there are definitely some things that are not quite hammered out yet… gosh-darn it - it’s really starting to feel like a bona fide HTML5 web-browser!
The first thing I tried after the Microsoft Canvas-Pad Demos was Processing.js. I used the awkward “Page Open” address bar/box/thing to navigate to ProcessingJS.org. Remarkably the page ‘just worked’.
The interactive banner animation and the pulsing blue-grey circle did their thing without any issues what-so-ever. Surely a testament to John Resig’s clarity of mind: the number of things that were working, compared to the number of potential IE gotcha’s I well-know are in the code… was pretty impressive.
Even the Cloudkick Server Visualization we put together last year ran without too many issues. Unfortunately the newer Processing.js releases were hitting a few snags in the parsing department, but the quick work of Yuri from the PJS development team, had the library back on trace within a couple of hours.
A surprising amount of the Canvas spec seems to work very well. The following two lists are a quick break-down of the good, the bad and the really freekin’ stupid. Even though the “Sucking” list is two times as long as the “Working” list… the 85% delivery on the Canvas spec more than makes up for the problems, most of the issues being fairly minor.
I knocked out a basic set of cross-browser canvas tests in order to make a comparison of where Canvas is at in mid 2010. I tried to use as many of the functions as possible, though you should be aware that this is in no way an exhaustive test-suite. You can click on the image to the left to expand the screen-capture I took of these tests running in Internet Explorer 9 Preview 3 on Win7.
I ran these simple tests on the five main-stream browsers (Firefox, Chrome, Safari, Opera & IE) and captured the images to disk. I dropped then into Photoshop to get a visual-diff between each browser. When I say “a visual diff” I am referring to the process of blending a source-image with a destination-image using a an “Difference” blend. I then invert the result for visual clarity.
The resulting images reveal all the places in which the browser rendering engines differ. When comparing these visual-diffs, we can see that IE9’s canvas rendering engine is closest to Safari’s.
You will also notice at the top right how the Miter Limit value is off by a couple of pixels. This is true when comparing IE9 to all the other browsers, so it is probably safe to assume that there is some kind of miscalculation going on–on Microsoft’s part.
Another interesting feature to note, is that all the other browsers capable of rendering text, will insert a space where a newline character is used: “EarthnMoon”. The “n”, for some unusual reason does not break the line in any of the canvas implementations. A space is always added instead… but not in IE9.
This list on the left contains a visual diff between each of the five most popular browsers. It is easy to see from this that Opera’s radial gradients are very different from everyone else’s implementation, I am not sure which is correct, but from past experience with functions like the arcTo command, I will assume Opera have nailed it and everyone else has missed something.
To compensate somewhat for this overlap in my tests I have run the test with and without the Canvas API calls, and calculated the difference.
I built a quick Spirograph style visual that changes the number of strokes points while rotating the Canvas. The test runs through a for-loop 20,000 times before alerting the result. You can click here to run the visual test or click here to run the test without Canvas API calls.
|Browser||Seconds||Without Canvas||Time spent in Canvas calls|
|IE9 Preview 3||92.009||79.880||12.129|
|Opera 10.54.3423||80.440||80.043||0.397Opera Wins! I am very surprised that Opera has beaten Chome in this test. Congratulations Opera. These tests were run in Win7 x64. One thing that has to be said, is that we are testing a small set of features and so it is unlikely that this result accurately represents the full spectrum of results. I also chose a stroke() example because I know that certain browsers should perform strokes faster in this test, but are mind-bogglingly slow. Notably: IE9 has problems turning off shadowBlur.|