Canvas Image (v3)

Revision 3 of this benchmark created on April 3, 2012

Preparation HTML

<canvas width="800" height="600" id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var images = [new Image(), new Image(), new Image(), new Image()];
  var canvases = [];

  var w = canvas.width,
      h = canvas.height;
  
  images[0].src = 'http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png';
  images[1].src = 'http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png';
  images[2].src = 'http://www.w3.org/html/logo/downloads/HTML5_Badge_32.png';

  for ( var i = 0; i < images.length; i++ ) {
        images[i].onload = (function(j) {
                return function() {
                        var c = document.createElement('canvas');
                        
                        c.width = images[j].width;
                        c.height = images[j].height;

                        c.getContext('2d').drawImage( images[j], 0, 0 );

                        canvases[j] = c;
                }
        })(i);
  }
</script>

Test runner

context.drawImage(canvases[0], 0, 0);

context.drawImage(images[0], 0, 0);

context.drawImage(canvases[1], 0, 0);

context.drawImage(images[1], 0, 0);

context.drawImage(canvases[2], 0, 0);

context.drawImage(images[2], 0, 0);

Revisions

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

• Revision 1: published by Daniel Baulig (Ba. Thesis) on April 12, 2011
• Revision 3: published on April 3, 2012