After additional testing, Flash 10.1 still consumes about half the battery of the HTML5 equivalent in the browser on the Nexus One. This time running for 30 minutes, instead of 10, the canvas demo consumed 12% battery and Flash 7%. Arguably this is only a 41.66% difference but you get the point. Want to reproduce this test at home? Here are the steps that I went through:
Navigate to the desired demo to test so it’s cached in the browser
Close the web browser
Turn off all radios and put the phone in airplane mode
Set the brightness to manual and turn it all the way down
Set the screen timeout to 30 minutes
Charge Android to 92% power (or whatever baseline you’d like)
Unplug from the power and open your web browser
Leave it for 30 minutes
Close the browser and observe the battery power level
Repeat for other technology
Both of my 30 minutes tests started at 92% battery power. After 30 minutes running the canvas demo, the battery was drained to 80%. The same amount of time running the Flash demo landed at 85%.
After running both 10 and 30 minute tests with both technologies, I feel quite confident in the results. Flash is consuming significantly less battery and performing better (57FPS vs 40FPS, see previous post). Keep in mind that with both of these technologies mobile browsers currently hijack multi-touch and mouse move. When coding interactive content for the mobile web there is a lot to consider but don’t assume that HTML5 canvas is the answer. I would expect better results once HTML5 has matured but my bet is that by that time Flash will be running even better. For the best performance use native applications for interactive content and keep the mobile web simple.
This is actually getting quite complicated. CSS3 transitions work great on iOS but not so hot on the Android. Canvas works good on the Android but kills battery. The iOS performs horribly right now with Canvas. Flash works great in the web on the Android but not at all on iOS. Of course, a picture is worth a thousand words: