Sunday, 4 November 2012

HTML5 Canvas Performance

I've been doing quite a lot of development in ClojureScript+Clojure recently, specifically working with the HTML5 Canvas, WebGL and the various rendering libraries for these.

I'm essentially working on a 2D application with a combination of heavy server-side calculation and real-time canvas updates - on a frame by frame basis.

I was originally working with the fantastic three.js library but fancied having a go at doing direct Canvas rendering; if only because I'm a purist at heart and like to use as much of my own code as I can.

Anyway, after testing performance with Safari (my typical daily browser of choice) I was getting fairly slow rendering speeds, so of course I tried Chrome and Firefox to see how they performed. The following is the timings for the first 10 frames. Each frame is drawing 1000 objects composed of 3 vertices each.

Safari 6.0.1


439ms
433ms
435ms
436ms
429ms
431ms
436ms
435ms
444ms
435ms

Chrome 22

72ms
58ms
50ms
49ms
50ms
53ms
48ms
48ms
52ms
51ms

Firefox 16

192ms
206ms
169ms
186ms
167ms
164ms
186ms
196ms
187ms
172ms

Conclusion

It seems Chrome is doing more hardware acceleration than the other platforms and Safari has the most disappointing performance at all.

I'm at a crossroads at the moment - I'm tempted to move to Haskell to do what I want - I would fully expect to get rendering speeds in the 1-5ms range. 

I shall continue my adventures...