- Space Attack is an arcade type shooting game where player controls a space ship and destroys enemies.
- Jump is a simple 2D platform game where player collects coins and tries to avoid falling down.
- Mouse is a reaction game where player controls a mouse character, tries to collect cheese and avoid hitting cats in a restricted area.
- Bullet is another reaction game where player has to counter-attack enemies with correct types of bullets.
For measuring the percentage of time used in rendering we used profiles from Chrome's developer tools. Measurements showed that the performance differences between implementations were small. Traditional implementations were from 3% to 8% more efficient than Canvas implementation. Differences between WebGL and Canvas implementations were similar: WebGL implementations were up to 9% more efficient than Canvas implementations. We found out that the reason for Canvas being the most inefficient might be text rendering. In our games rendering a simple text showing scores during gameplay took from 35% to 87% of the time used in rendering.
We also tried to measure FPS of the games but it's not a trivial task when browser’s rendering loop dominates drawing. For Canvas and WebGL we could use Chrome's FPS counter with 2D-hardware acceleration to measure FPS, but for games that doesn't involve Canvas or WebGL Chrome's FPS counter can't be used. Chrome also limits FPS to 60, so differences between efficiency in Canvas and WebGL weren’t exposed in measurements.
MozPaintCount was another method we tried for measuring FPS but for Mouse game that uses mouse movements as a control MozPaintCount didn't provide reliable results. MozPaintCount gives the number of how many times the whole document is rendered and when you move the cursor, document is apparently rendered again. So for measuring game performance MozPaintCount weren't the right tool.
One huge problem of comparing FPS of program in browser is that there aren't tools that works for Canvas, WebGL and traditional programs and are available in several browsers. MozPaintCount method works only in Mozilla Firefox and Chromes FPS counter is only available in Chrome so reliable and comparable results can't be provided easily.
Memory usage we explored with Timeline from Chrome's developer tools. Between Canvas game and traditional web game there isn't a significant difference in memory usage but between Canvas and WebGL the difference is notable. WebGL implementations uses 2-3 times more memory than Canvas implementations. In Canvas games the memory usage were mostly under 10 MB when in WebGL games it was over 20 MB after games had been running approximately 15 minutes.