Canvas Mark 2013 - test your browser performance

Check out this nice tool that tests your browser performance: Canvas Mark 2013
Github Source

Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, vectors, shapes, text, shadow, alpha blending, pixel blur, Math, canvas shapes, polygon fills, image transformations, getImageData, putImageData.

So the tests should be made on the five most popular browsers: Firefox, Chrome, Opera, IE9/IE10, and Safari. You can run them one by one, closing all other applications that might drain CPU/GPU processing power. Also you should run these test on the same machine as running them on different machines will produce different results. The browser window should not be minimised.

I couldn't find a flag called GPU VSync in chrome://flags (Chrome 40) so I couldn't disable it. Apart from that, all other GPU related flags were disabled except One-copy-rasterizer.

I am using Firefox 34, Opera 26.0, Chrome 40, IE9 and Safari 5.1.7 on Windows 7.
Also I am using middle class Asus laptop. Ask me for more hardware details (not sure if I should share this information).

Note: not sure why but the tool detects that Opera 26.0 is actually Chrome 39. I have tested other similar tools and they also say that Opera 26.0 is Chrome 39. Perhaps it is something with the engine of Opera.

Note: running the test twice in the same browser without refresh uncovers a bug, so the second run might go until the blur image test and stop there. Therefore I recommend closing and opening the browser after each test.

 The results from my testing are:

1. Safari 5.1.7 with 7034
2. Chrome 40 with 6072
3. Opera 26 with 5787
4. Firefox 34 with 4790
5. Internet Explorer 9 with 4504

Canvas Mark 2013

Tower Diffence web game

Turns out you can build fully featured HTML5/JavaScript games.
Check this demo of a Tower Diffence web game. Made with WebGL and three.js

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7


On Opera, Firefox and Chrome it worked perfectly, while on IE9 and Safari it just displayed white area where the game should happen. I finsihed the game and on Opera and Firefox it used about 40% of the processor power while on Chrome it had two processes that worked hard, on 30% and on 40%. Not sure why? Maybe Chrome works that way.

The game is not a proper test for HTML5 audio API since it doesn't have a single sound effect or music.

IE 9

Safari 5.1.7

Opera 26.0

Opera 26.0

Chrome 40

Two working processes for Chrome

Utilizing WebGL and three.js

Utilizing WebGL and three.js

Last wave finished on Chrome 40

about

Account Slider

Account slider. I cannot recall making a sliding accordion before, without using Flash. This is made with HTML5/JavaScript. Well done!

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7

On Opera/Firefox/Chrome works perfectly. On Safari works but it is a bit sluggish. On IE9 it shows a bulleted list instead of accordion.