Draw Image Image vs Canvas

Benchmark created by JT on

Description

Testing drawImage with image vs canvas as a source.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<canvas id="a"></canvas>
<script>
  var a = $('#a')[0],
          b = $('<canvas></canvas>').appendTo('body')[0],
          aC = a.getContext('2d'),
          bC = b.getContext('2d')
  
  var img = new Image();
  
  img.src = 'http://huntedcow.cachefly.net/fs/tiles/3_sheet.png';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Image
for (var i = 2000; i--;)
aC.drawImage(img, 0, 0, 40, 40, 0, 0, 40, 40);
ready
Canvas
bC.drawImage(img, 0, 0, 40, 40, 0, 0, 40, 40);

for (var i = 2000; i--;)
aC.drawImage(b, 0, 0, 40, 40, 0, 0, 40, 40);
ready

Revisions

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