Why does drawImage perform so much faster in Safari than Chrome or Firefox?

Question

I made a little HTML canvas visualizer for fun, and I have noticed that it runs horribly in Chrome, pretty bad in Firefox, but absolutely amazingly in Safari, including iPhone and iPad!

Can anyone explain why?

I think the code should be fairly straightforward, but basically I'm drawing points for mouse (or touch) location(s), then copying the canvas to a temporary canvas using drawImage. From there I clear the display canvas, then copy the temp canvas back (4 times), but applying a few things like rotation, offset, transparency and scale (and playing around with some different globalCompositeOperations), all using drawImage. So in total, drawImage is called 5 times in each loop.

You can view the demo here: http://lakenen.com/vis.html

Any insight would be greatly appreciated!

PS. try this on an iPad if you can; it's pretty neat with multi-touch :)

Answer 1

Since the performance profiler is pretty much identical in Safari and Chrome you should be able to determine this yourself. Your demo runs fine on both Safari and Chrome on my machine.

Anyway, I can't tell you why drawImage performs worse on Chrome than Safari, only that it does when an image fails to load and is then drawn. Otherwise Chrome seems faster on Windows.

Here's a simple jsperf I made a while ago. It seems to show chrome 19 running twice as fast as safari on my windows 7 machine.