How fast is the HTML5 Canvas? (Part 1)

The conventional wisdom in the mobile development industry has been that mobile browsers are very slow and developing HTML5 based games on mobile devices is not there yet. There are a lot of workarounds and SDKs out there to help us get better performance using different methods (I am not going to discuss those methods or frameworks here). But how slow is the WebView? How much can you get out of a WebView using an HTML5 Canvas? We are doing a series of tests and benchmarks to find out. This post contains the story of the first attempts. I will try to post new information and results as our benchmark evolves.

The test program is a mobile app that creates a fountain of particles that follows the accelerometer, in two tabs. The fist tab is written completely in JavaScript (running inside a webview) and draws the particles on an HTML canvas. The second tab uses openGL to render the particles but gets the coordinates and number of particles from JavaScript. You can download the source code for the app from MoSync Labs' github page. I know it might not be the optimum benchmark, but it is a good start.

Our intention was to find out if HTML Canvas is good enough for creating complex animations. So we grabbed a bunch of devices and ran the application. We found some very surprising results that I share with you here. Below is a table with the devices we used and their operating system information:

and here you can see a chart comparing performances:

There are some really interesting results in this test. First, in iOS 5 HTML canvas is very fast (even faster than openGL in some cases). Next, we can see a trend in performance improvement on different platforms that is helping the Canvas to catch up with openGL. Finally, OpenGL is still a good bet on getting consistently high performance on many platforms. 

We are working on a more complete benchmark, which we will test on many more platforms, especially newer ones. So stay tuned for further posts and results. 

Don't forget to download the source and try it our on your device. You can get it from MoSyncLabs' github page.