canvas-drawImage (v20)

Revision 20 of this benchmark created on

Preparation HTML

<div id="result"></div>
<script>
  var doc = document.getElementById("result");
  var c = document.createElement('canvas');
  var ctx = c.getContext('2d');
  c.width = 600;
  c.height = 800;
  doc.appendChild(c);
  
 
  var smallcvs = document.createElement('canvas');
  var ctx2 = smallcvs.getContext('2d');
  smallcvs.width = 128;
  smallcvs.height = 128;
  doc.appendChild(smallcvs);
  ctx2.fillStyle = 'red';
  ctx2.fillRect(16, 16, 96, 96);

  var smallimg = new Image();
  smallimg.src = smallcvs.toDataURL();
 
  var bigcvs = document.createElement('canvas');
  var ctx2 = bigcvs.getContext('2d');
  doc.appendChild(bigcvs);
  bigcvs.width = 2560;
  bigcvs.height = 2560;
  ctx2.fillRect(116, 116, 96, 96);

  var bigimg = new Image();
  bigimg.src = bigcvs.toDataURL();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
drawImage whole image
ctx.drawImage(smallcvs, 10, 10, 128, 128, 10, 10, 128, 128);
ready
drawImage whole canvas
ctx.drawImage(smallcvs, 1, 1, 128, 128, 10, 10, 128, 128);
ready
drawImage image section
ctx.drawImage(smallcvs, 100, 100, 128, 128, 10, 10, 128, 128);
ready
drawImage canvas section
ctx.drawImage(bigcvs, 100, 100, 128, 128, 10, 10, 128, 128);
ready
draw image with translation
ctx.save();
ctx.translate(10,10);
ctx.drawImage(smallimg, 0, 0);
ctx.restore();
ready
draw canvas with translation
ctx.save();
ctx.translate(10,10);
ctx.drawImage(smallcvs, 0, 0);
ctx.restore();
ready
Tt
ctx.drawImage(smallcvs, 1, 1, 128, 128, 10, 10, 128, 128);
ready
4444/33/22/11
ready

Revisions

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