drawImage whole pixels

JavaScript performance comparison

Revision 9 of this test case created

Preparation code

<canvas id="screen"></canvas>
<script>
  var ctx = document.getElementById("screen").getContext("2d");
  var image = document.createElement("img");
  image.src = "http://icons.iconarchive.com/icons/ph03nyx/super-mario/48/Retro-Mushroom-1UP-2-icon.png";
 
  function fasterRound(value)
  {
    return(~~(value+(value > 0 ? .5 : -.5)));
  }
 
  function fasterRoundPos(value)
  {
    return(~~(value+0.5));
  }
  function nop(value) { return(value); }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
whole pixel
ctx.drawImage(image, Math.round(0.5), Math.round(0.5));
pending…
sub pixel
ctx.drawImage(image, 0.5, 0.5);
pending…
whole pixels 2
ctx.drawImage(image, fasterRound(0.5), fasterRound(0.5));
pending…
integer pixel
ctx.drawImage(image, 0, 0);
pending…
whole pixels 3
ctx.drawImage(image, fasterRoundPos(0.5), fasterRoundPos(0.5));
pending…
integer nop pixel
ctx.drawImage(image, nop(0), nop(0));
pending…
whole pixels 4
ctx.drawImage(image, ~~(0.5+0.5), ~~(0.5+0.5));
pending…
sub nop pixel
ctx.drawImage(image, nop(0.5), nop(0.5));
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment