Thursday, January 28th, 2010

Canvas Benchmark

Category: Browsers, Canvas, Performance

<p>

The Freeciv.net crew has benchmarked a path in their canvas game. It is one data point, and tests more than just Canvas itself because a lot of code is running in the game. Thus, it ends up testing the union of a particular JavaScript path and the rendering of the canvas.

Here are the results:

canvasbenchmark

With Bespin we had slightly different results, and the bulk of the bottleneck was in the blitting of the canvas. Optimizations were made to canvas over the initial phase of Bespin so the various browsers would leap frog each other. Good times :)

Related Content:

Posted by Dion Almaer at 6:09 am
23 Comments

++++-
4 rating from 30 votes

23 Comments »

Comments feed TrackBack URI

What the … is going on with MS browsers? IE8 was promised as better than older MSIEs.

Comment by stoimen — January 28, 2010

@stoimen Better than awful is still pretty bad…

Comment by Skilldrick — January 28, 2010

IE8 has no native canvas support, has it? Would explain the results. And why no Safari 4 on Mac results? In my experience, it is rather fast.

Comment by MartijnHoutman — January 28, 2010

Also why are there no Opera figures? Clearly it would be somewhere after or before FF in close proximity.

Comment by DragoshDX2 — January 28, 2010

In the linked page they wrote “Opera supports the HTML5 canvas element, but other Javascript incompatibilities made it impossible to run these benchmarks in Opera 10.”

Comment by pmontrasio — January 28, 2010

If they tested FF 3.7a1, they should have also tested nightly WebKit (which is, for example, noticeably faster than Safari 4.0.4 in SunSpider). I wonder how it would compare with Chrome.

Comment by kangax — January 28, 2010

I’d be curious to see the numbers for Opera 10.10 and the pre-alpha of 10.50 once the ” Javascript incompatibilities ” are ironed out.

Although there is SO much more than pure canvas manipulation going on there.

Comment by p01 — January 28, 2010

There are a lot of requests to run this in more browsers. I can sympathize with the pain of doing that. That’s why we created Browserscope, so that anyone could run the tests on any web client they chose. It would be great if someone contributed a Canvas test suite to Browserscope. Contact browserscope@googlegroups.com if you’re interested. I’ll contact the Freeciv folks now.

Comment by souders — January 28, 2010

Its not very useful to include IE8 in the benchmark data, since canvas was not used (how could it be?)

Comment by AngusC — January 28, 2010

Including IE 8 obviously is benchmarking VML (and the canvas to VML abstraction) versus canvas in the other browsers.

Comment by eyelidlessness — January 28, 2010

Come on guys, let’s be honest about it: IE8 was shown here because it makes IE look horrible, and everyone wants IE to look as horrible as possible all the time.

Whether IE actually *is* horrible is a perfectly valid debate to have… but it was put in these results because someone has an axe to grind, as do a lot of people.

We know IE doesn’t have native canvas support, therefore its performance is going to blow compared to the rest because there’s a shim layer there that the other browsers don’t have to deal with. Shame on MS for not building in canvas support by now, but that’s another topic.

What would it look like if I, let’s say, create a shim to simulate canvas via Flash plug-in on Chrome, Safari or Firefox? Think the results for those browsers might then look a hell of a lot worse? Damned skimpy it would!

I’d bet it wouldn’t look as bad as IE does here still because IE has other issues that bring it down that the other browsers can somewhat compensate for, but you get the point: if the comparison were fair, which this one ain’t, the difference wouldn’t look like Andre the Giant standing next to Hornswaggle (pro wrestling reference… for those that aren’t fans, try Shaq standing next to Hillary Clinton).

Comment by fzammetti — January 28, 2010

You can get some canvas support in IE via excanvas.

Comment by mkirkland — January 28, 2010

@stoimen It’s a perfectly fair comparison. It’s no one’s fault but Microsoft’s that IE doesn’t have native canvas support.

Comment by mkirkland — January 28, 2010

@fzammetti Or maybe IE8 was shown because a lot of people are actually using it for some reason. IE makes IE look horrible because IE is horrible. You would surely get similarly horrible results simulating canvas in Flash, probably worse results actually. A fairer comparison would be to simulate canvas in SVG which would surely perform worse than native canvas but better than VML Canvas since it’s obvious to anyone who has used Raphael that SVG support in the proper browsers blows away vml support in IE. But for the fairest comparison, look no further than the comparison provided here. This is the state of canvas support across browsers.

If you’re asking for a fair comparison of just Javascript performance then, canvas, svg, vml should not be included. I’d add to that, selector tests should not be included, dom manipulation should not be included and XMLHttpRequests should not be included because all of them may make use of aspects of the browser other than just the javascript engine. Those tests would be fair but utterly pointless because there is no real world situation where Javascript performance is the only thing you need to consider. And anyway, IE would still lose big time.

Comment by okonomiyaki3000 — January 28, 2010

@fzammetti: I think it’s fair to make IE look as bad as possible in every benchmark/test till they pick up their game and stop wasting web developers time! We still have 13% IE7 and 11% IE6! So I’m all for those tiny foot notes that say “graph not to scale”.

Comment by aw2xcd — January 28, 2010

IE9 is moving to Direct2D and plans for canvas support, maybe we will soon be able to use canvas for serious graphics?
What I’d really like to see is Webkit and Gecko using OpenGL as a backend.

Comment by jhiswin — January 29, 2010

IE7 had the chance to conform to standards and prefered technologies.
They didn’t.
IE8 had the chance to conform to standards and prefered technologies.
They didn’t.
IE9 is 5 years too late.
That is… if it was any other browser and not one forcefed to the public by being shipped with the most popular OS.
.
So yes, we have every godgiven right to burn IE to the ground though we applaud the fact MS is finally getting it’s head out of it’s arse with IE9. Unfortunatly, we have no BLEEDING CHOICE but to support IE6 (well maybe not IE6), IE7 and IE8 for years to come…
.
*cough* so, had to spew a bit, proceed gentlemen =P

Comment by BenGerrissen — January 29, 2010

@mkirkland agree. Look I’m not against MSIE. However this is one of the most used browsers. The only thing is that I’m pretty amazed how it can be so far from other modern browser. The simple logic is that MS has the resource for producing something better, doesn’t it?

Comment by stoimen — January 29, 2010

@stoimen Of course MS has the resources to make a better browser but why should they? Too make it easier to develop world class web apps that rival desktop apps and run on any platform? Then, why would anyone buy their terrible OS or Office products? People have been talking about the browser as OS for well over 10 years but only now are we actually starting to get there. Why? Because Netscape dropped the ball and Microsoft never had that goal in mind anyway.

Of course that conspiracy theory could be all wrong. Maybe, despite all their resources, they are just incompetent.

Is there a third option?

Comment by okonomiyaki3000 — January 29, 2010

Is there a third option?
Wait till someone else did the groundwork, buy them out and vendor it under the flagship? Sound familiar? =P

Comment by BenGerrissen — January 29, 2010

@BenGerrisen They use that tactic often enough but not with the browser it seems. I’d be perfectly happy if they bought out Opera and rebranded Opera 11 as IE9 but it doesn’t look like that’s about to happen.

Comment by okonomiyaki3000 — January 29, 2010

Regarding IE8; http://ra-ajax.org/and-the-winner-of-the-best-browser-in-the-world-prize-goes-to.blog
.
As you can clearly see, even in “non-canvas based tests” IE8 totally sucks…!
IE8 is bad, no matter how you dress it, sure they made some leaps in W3C compliance and such compared to IE6/7, but still it’s by **FAR** the worst browser on the planet. My personal experience is that it’s even worse on desktop, on my kick ass Acer Laptop, with state of the art CPU and all that good stuff compared to running Safari on a cheesy iPhone (or Droid for that matter)

When I have a bad day, I define IE8 as the “Marketing Campaign for Siverlight” in fact … :(

Comment by ThomasHansen — January 31, 2010

I also think it’s fair to include IE in these measurements, because the point of this benchmark is to measure what sort of performance you can get building pure-javascript web games like these. If IE lacks the tools to do that effectively, then that is completely IE’s fault.
.
On the other hand, wouldn’t this sort of game run much faster built on top of svgweb? It seems to me that a DOM-based graphics model, like VML, is much better suited to applications where most of the drawing is merely offsetting some graphics elements across the screen.

Comment by Joeri — February 1, 2010

Leave a comment

You must be logged in to post a comment.