Canvas drawImage vs putImageData (v49)

Revision 49 of this benchmark created by Chad on

Description

Compare the tile drawing speed of ctx.drawImage against ctx.putImageData.

Each function pulls image data out of a source image / imageData object and writes to another canvas at varrying positions.

Note: As of 2014/03/28 ctx.drawImage() is roughly twice as fast in Chrome Version 29.0.1547.66

Preparation HTML

<canvas width=160 height=175 id="drawImageCanvas"></canvas>
<canvas width=160 height=175 id="putImageDataCanvas"></canvas>
<canvas width=160 height=175 id="tileImageCanvas"></canvas>
<img id="tileImage" src="data:image/png;base64,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">
<script>
var drawImageCanvas = document.getElementById('drawImageCanvas');
var drawImageCTX = drawImageCanvas.getContext('2d');

var putImageDataCanvas = document.getElementById('putImageDataCanvas');
var putImageDataCTX = putImageDataCanvas.getContext('2d');

var tileImage = document.getElementById('tileImage');

var tileImageCanvas = document.getElementById('tileImageCanvas');
var tileImageCTX = tileImageCanvas.getContext('2d');

var tileWidth = 16;
var tileHeight = 16;
var tilesWide = 10;
var tilesHigh = 11;

tileImageCTX.drawImage(tileImage, 0, 0);

function drawImageTile(ctx, image, tilesWide, tilesHigh, tileWidth, tileHeight, tileNumber, x, y)
{
        ctx.drawImage(image,(tileNumber % tilesWide)*tileWidth, Math.floor(tileNumber / tilesWide) * tileHeight, tileWidth, tileHeight, x, y, tileWidth, tileHeight);
}

function putImageDataTile(ctx, imageDataCTX, tilesWide, tilesHigh, tileWidth, tileHeight, tileNumber, x, y)
{
        ctx.putImageData(imageDataCTX.getImageData((tileNumber % tilesWide)*tileWidth, Math.floor(tileNumber / tilesWide) * tileHeight, tileWidth, tileHeight), x, y, 0, 0, tileWidth, tileHeight);
}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Using ctx.drawImage
for (r = 0; r < 5; r++) {
  for (y = 0; y < tilesHigh; y++) {
    for (x = 0; x < tilesWide; x++) {
      drawImageTile(drawImageCTX, tileImage, tilesWide, tilesHigh, tileWidth, tileHeight, x + y * tilesWide, x * tileWidth, y * tileHeight);
    }
  }
}
ready
Using ctx.putImageData
for (r = 0; r < 5; r++) {
  for (y = 0; y < tilesHigh; y++) {
    for (x = 0; x < tilesWide; x++) {
      putImageDataTile(putImageDataCTX, tileImageCTX, tilesWide, tilesHigh, tileWidth, tileHeight, x + y * tilesWide, x * tileWidth, y * tileHeight);
    }
  }
}
ready

Revisions

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