drawImage from different sources (v12)

Revision 12 of this benchmark created by Jonathan on

Preparation HTML

<canvas id="cnv" width="960" height="240" >
</canvas>
<canvas id="cnvoff" width="960" height="240" style='display:none'>
</canvas>
<img id="img1" src="http://mozilla.org/media/img/firefox/template/header-
logo-inverse.png" style="display: none" />
<img id="img2" src="http://mozilla.org/media/img/firefox/template/header-logo-inverse.png" style="display: none" />
<img id="img3" src="http://mozilla.org/media/img/firefox/template/header-logo-inverse.png" style="display: none" />

Setup

function createCanvas(w, h) {
    return document.getElementById('cnvoff');
  }
  
  // globals
  var g_ctx = document.getElementById('cnv').getContext('2d');
  g_ctx.translate(1000, 1000);
  var g_img1 = document.getElementById('img1');
  var g_img2 = document.getElementById('img2');
  var g_img3 = document.getElementById('img3');
  var g_offscreenCanvas = createCanvas(320*3, 240);
  
  g_offscreenCanvas.getContext('2d').drawImage(g_img1, 320*0, 0);
  g_offscreenCanvas.getContext('2d').drawImage(g_img2, 320*1, 0);
  g_offscreenCanvas.getContext('2d').drawImage(g_img3, 320*2, 0);
  
  var g_jsimg1 = new Image();
  g_jsimg1.src = "http://mozilla.org/media/img/firefox/template/header-logo-inverse.png";
  var g_jsimg2 = new Image();
  g_jsimg2.src = "http://mozilla.org/media/img/firefox/template/header-logo-inverse.png";
  var g_jsimg3 = new Image();
  g_jsimg3.src = "http://mozilla.org/media/img/firefox/template/header-logo-inverse.png";

Test runner

Ready to run.

Testing in
TestOps/sec
img
g_ctx.drawImage(g_img1, 0, 0, 180, 70, 0, 0, 180, 70);
g_ctx.drawImage(g_img2, 0, 0, 180, 70, 320, 0, 180, 70);
g_ctx.drawImage(g_img3, 0, 0, 180, 70, 640, 0, 180, 70);
ready
not-in-dom canvas
g_ctx.drawImage(g_offscreenCanvas, 320*0, 0, 180, 70, 0, 0, 180, 70);
g_ctx.drawImage(g_offscreenCanvas, 320*1, 0, 180, 70, 10, 0, 180, 70);
g_ctx.drawImage(g_offscreenCanvas, 320*2, 0, 180, 70, 20, 0, 180, 70);
ready
group
g_ctx.drawImage(g_offscreenCanvas, 0, 0, 320*2+180, 70, 20, 0, 320*2+180, 70);
ready
JavaScript Image element
g_ctx.drawImage(g_jsimg1, 0, 0, 180, 70, 0, 0, 180, 70);
g_ctx.drawImage(g_jsimg2, 0, 0, 180, 70, 320, 0, 180, 70);
g_ctx.drawImage(g_jsimg3, 0, 0, 180, 70, 640, 0, 180, 70);
ready

Revisions

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