How fast is the HTML5 Canvas? (Part 2)

If you have missed our previous post, we are evaluating the conventional wisdom in the industry that mobile browsers are very slow and developing HTML5 based games on mobile devices is not there yet.

Last week we have published a post on how fast is the HTML5 canvas. The test was using a simple particle generator that followed the device's accelerometer. As promised we are working on the benchmark to improve it and add more functionality. In addition to improving the functionality of the benchmark application, we plan to run our test on more devices and using more configurations.

In this post I am going to present the results of our second series of tests. The benchmark program have two tabs. The first tab includes some JavaScript code creating a more complex pattern of 100 particles moving in an HTML canvas. The second tab uses the same pattern but renders the particles using native OpenGL functionality on the device.

The major difference between the two benchmark applications (in the two blog posts) is that the new app is more deterministic and complex (as far as the rendering is concerned). As usual you can get the code from MoSyncLab's Github page and try it out yourself. Here are screenshots of the app running on iPhone 4s:

We ran our tests on a bunch of devices (we had a couple more than the previous time) for several times and recorded the performance in Frames per Second(fps). The results follow the same pattern as before. You can see the list of devices and their respective performance results (average over all tests) below:

and here is the chart that visualizes the performance of HTML5 canvas and OpenGL, on different platforms:

There are some interesting points in our test results. First, Apple is clearly using some sort of hardware acceleration in iOS 5 for HTML5 canvas. Next, there is a steady performance increase in HTML5 canvas from Android 2.1 to Android 3.0, but there is a strange performance drop in Ice Cream Sandwich (which might be because of the hardware as well).

Finally, Android is clearly lagging behind iOS in WebView performance. This lack of performance can be one reasons behind moving Chrome to Android.  This brings us to our next post that will be about mobile web browsers' canvas performance. I will try to compile the results and post them here as soon as possible. Here is short video showing our app running on different devices:

As a conclusion we can say our result show if you want to target the majority of Android users based on Android's own chart you are better off using OpenGL. Additionally, if we consider the stats in here somehow accurate, you will still loose about 30% of your iOS audience if you only use Canvas for your game.

So in summary, we are still better off using OpenGL for mobile games until the majority of users move to newer operating systems and devices.