Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: drawImage, drawImage scaling, alpha, composition modes, points, lines, fills, shadows and text functions.
137 |
148 |
158 | Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, canvas drawing, alpha blending, polygon fills, shadows and text functions.
165 |Run benchmark using HTML5 compatible browser: Chrome | FireFox | Safari | Opera | IE9/10.
172 |This benchmark suite uses a number of elements from my HTML5 games including Asteroids and Arena5. See more HTML5 Canvas experiments.
175 |Important notes for Windows + Chrome users! [+]
178 |
To get the best benchmark score for your machine, it is advisable to Disable VSync. Go to "about:flags" and toggle: Disable GPU VSync "Disables synchronisation with the display's vertical refresh rate when GPU rendering." This will resolve the issue with the Chrome implementation of "requestAnimationFrame()" that tries to maintain a steady 60 frames-per-second (FPS) but on Windows with accelerated 2D canvas support, it will drop immediately down to 30 FPS when 60 FPS is not achievable with no gradual degredation. On Mac/Linux the drop in FPS is gradual and therefore does not affect the benchmark. So if you see the FPS counter drop directly from around 60 FPS to 30 FPS then you should do this. This will not produce an "unfair" score as scores are based on time not the number of frames generated.
179 |
How to interpret the results [+]
183 |
CanvasMark gives a score for the browser based on the combined performance in each of the various stress tests. You should ensure the browser window is not minimized and that no other CPU or GPU intensive processes are running during the test. The results can only be compared to other browsers running on the same machine - as each machine with different CPU or graphics will produce difference results.
184 |
How does it work [+]
188 |
Each test is run and progressively tuned to stress the browser until a steady 30 frames-per-second (FPS) is reached. More objects are added to the scene or the scene is made more complex to render until that point is reached. Then the test is considered completed and the next test is started. The score is based on the length of time the browser was able to maintain the test scene at greater than 30 FPS, multiplied by a weighting for the complexity of each test type.
189 |
Benchmark version 1.1 [25-03-2013]
193 |Source code now available on GitHub.
194 |CanvasMark Score: " + score + " (" + browser + " on " + OS + ")
"); 271 | // tweet this result link 272 | var tweet = "http://twitter.com/home/?status=" + browser + " (" + OS + ") scored " + score + " in the CanvasMark HTML5 benchmark! Test your browser: http://bit.ly/canvasmark %23javascript %23html5"; 273 | $("#tweetlink").attr('href', tweet.replace(/ /g, "%20")); 274 | $("#results-wrapper").fadeIn(); 275 | } 276 | } 277 | Game.centerFillText(ctx, interval.label, "18pt Helvetica", GameHandler.height/2 - 32, "white"); 278 | Game.centerFillText(ctx, "Benchmark Score: " + score, "14pt Helvetica", GameHandler.height/2, "white"); 279 | 280 | interval.complete = (this.exit || interval.framecounter++ > 400); 281 | }, 282 | 283 | onKeyDownHandler: function onKeyDownHandler(keyCode) 284 | { 285 | switch (keyCode) 286 | { 287 | case KEY.SPACE: 288 | { 289 | this.exit = true; 290 | return true; 291 | break; 292 | } 293 | } 294 | } 295 | }); 296 | })(); 297 | 298 | 299 | var BrowserDetect = { 300 | init: function () { 301 | this.browser = this.searchString(this.dataBrowser) || "Unknown Browser"; 302 | this.version = this.searchVersion(navigator.userAgent) 303 | || this.searchVersion(navigator.appVersion) 304 | || "an unknown version"; 305 | this.OS = this.searchString(this.dataOS) || "Unknown OS"; 306 | }, 307 | searchString: function (data) { 308 | for (var i=0;i