lookup-canvas-perf

JavaScript performance comparison

Revision 3 of this test case created by tss

Preparation code

<canvas width="3000" height="3000" id="testCanvas" style="width: 100%; height: 500px">
</canvas>
<script src="https://dl.dropboxusercontent.com/u/24935738/jsperf/data.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var texture3Base64 = texture2Base64.replace('data:image/png;base64,', 'data:;base64,');
   
    var canvas = document.getElementById('testCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0,0,canvas.width, canvas.height);
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
largeAsync
// async test
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
};
img.src = texture1Base64;
pending…
largeSync
var img = new Image();
img.src = texture1Base64;
ctx.drawImage(img, 0, 0);
pending…
smallSyncWoHeader
var img = new Image();
img.src = texture3Base64;
ctx.drawImage(img, 0, 0);
pending…
smallAsync
// async test
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
};
img.src = texture2Base64;
pending…
smallDisplayNone
canvas.style.display = 'none';
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0);
canvas.style.display = 'block';
pending…
smallReqAnFrame
// async test
var img = new Image();
img.src = texture2Base64;
window.requestAnimationFrame(function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
});
pending…
smallSync
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0);
pending…
smallSyncWithSize
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.naturalWidth, img.naturalHeight);
pending…
smallSyncTmpCanvasWoHeader
var tmpCanvas = document.createElement('canvas');
tmpCanvas.width = canvas.width;
tmpCanvas.height = canvas.height;
var tmpCtx = tmpCanvas.getContext('2d');

var img = new Image();
img.src = texture3Base64;
tmpCtx.drawImage(img, 0, 0);

ctx.drawImage(tmpCanvas, 0, 0);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment