Performance comparison between HTML, SVG and Canvas

I already found out that using scroll properties is good for fast map scrolling. I extended the concept, and after posting my code to animate sprites via a containers scroll properties I thought hey, why not just check if there’s anything better. The following article provides a short overview and a sample for each technique. There is a zip file containing the full sources as well

Asking the Smart People

I had finished the original html example and thought why not ask people who are actually developing this cool stuff.
So off I went, posting this question on the Mozilla Developer Newsgroup for SVG.
SVG I thought should be well suited for displaying and modifying graphical content. It is actually very well suited for displaying said content, but animating bitmap data is quite slow.
In fact the speed is about comparable to that of a pure html image technique. Mind you that I dodn’t use any specific svg filters or anything, just moving a bitmap around via it’s attributes.
The SVG example (you’ll probably need FF3, Safari3 or Opera 9.5 to view this)

Skyrocketing Performance with Canvas

In the Mozilla Newsgroup I was also reminded of canvas which I had heard about almost 2 years ago researching about x3d for college. Well, I had forgotten about it since.

But honestly, I shouldn’t have.

Of the 3 methods I tried, canvas is by far the fastest one, it’s about 100% faster than plain html.
See the canvas example for evidence on this claim.
Granted though, it is no established standard (yet) and Microsoft’s Internet Explorer doesn’t support it yet, although there is a workaround code for this from google.

If you are working on a pbgg (persistent browser based game) or any Javascript Graphics implementation that solely relies on raster data, I strongly suggest that you look into using canvas for this task. It’s finally looking as if JavaScript is good enough for more advanced browser based games.

May the Source be With You

For anyone interested in the source code to dissect and probably get yourself up to speed quickly with either technique, here’s a zip, containing the full source for all 3 5 samples.
Download the source zip.

Useful Links

For further information on canvas, here are a few links that I found very helpful:

Mozilla Developer Center: Canvas Documentation

A very good overview and starting point

Mozilla Developer Center: Canvas Examples

Some very good examples, some also with source code

Mozilla Developer Center: Canvas Tutorial

A full series of small tutorials covering all the basics to get you started

Apple Developer Center: Canvas Object Documentation

Very informative as a resource for all public object properties and methods

As a note, the Mozilla tutorial on Basic Animation contains a couple very good examples not on the dedicated example page.

Okay, back to work for me it is…

Have fun!

The Geeky Stuff Comes Last

Added 2008/04/01 9:31 pm

Here are my results for the examples above:

Scrolling img container:

54.5% (13%) [14%]

Setting img.style.top AND img.style.left:

59.5% (12%) [16.5%]

Setting div.style.backgroundPosition:

64% (15.5%) [17.8%]

Using SVG

72% (73%*) [81.5%]

Using Canvas

25% (11.8%) [18%]

Firefox 3 beta 4
(Safari 3.1)
[Opera 9.5 beta]
Tested on MBP ‘2006 2.16GHz, 1GiB Ram, OS X 10.4.11

I’d like to hear about your results too. I’d appreciate if you post them here.

Tags: code performance, Firefox, Games, JavaScript, Opera, Safari, SVG