drawImage overload comparison (v33)

Revision 33 of this benchmark created by Treer on

Description

Checking if using the more fully-featured drawImage() methods have a performance cost when no scaling is required.

  • context.drawImage(img,x,y);

  • context.drawImage(img,x,y,width,height);

  • context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Preparation HTML

<canvas id="screen"></canvas>
<script>
  var ctx = document.getElementById("screen").getContext("2d");
  var image = document.createElement("img");
  var nativeWidth;
  var nativeHeight;

  image.onload = function() {
    nativeWidth = image.width;
    nativeHeight = image.height;
  };
  image.src = "http://icons.iconarchive.com/icons/ph03nyx/super-mario/48/Retro-Mushroom-1UP-2-icon.png";

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
no scaling arguments
ctx.drawImage(image, 0, 0);
ready
destination scaling arguments
ctx.drawImage(image, 0, 0, nativeWidth, nativeHeight);
ready
source+destination scaling arguments
ctx.drawImage(image, 0, 0, nativeWidth, nativeHeight, 0, 0, nativeWidth, nativeHeight);
ready
Actual scaling
ctx.drawImage(image, 0, 0, 40, 40);
ready

Revisions

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