canvas-spritesheets

JavaScript performance comparison

Test case created by Ilmari

Preparation code

<script>
  var c = document.createElement('canvas');
  c.width = 1280;
  c.height = 64;
  var ctx = c.getContext('2d');
  ctx.fillRect(0, 0, 1280, 64);
  
  var c2 = document.createElement('canvas');
  c2.width = 512;
  c2.height = 512;
  var ctx2 = c2.getContext('2d');
  
  var frames = [];
  for (var i = 0; i < c.width; i += c.height) {
   var f = document.createElement('canvas');
   f.width = f.height = c.height;
   var fctx = f.getContext('2d');
   fctx.globalCompositeOperation = 'copy';
   fctx.drawImage(c, -i, c.height);
   frames.push(f);
  }
</script>
    

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
clipping
for (var i = 0; i < c.width; i += c.height) {
 ctx2.drawImage(c, i, 0, c.height, c.height, 64, 64, c.height, c.height);
}
ctx2.getImageData(0, 0, 1, 1);
pending…
cached frames
for (var i = 0; i < c.width; i += c.height) {
 ctx2.drawImage(frames[i / c.height], 64, 64);
}
ctx2.getImageData(0, 0, 1, 1);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments