Preparation code

<canvas id="main">
</canvas>
<img id="tree" src="http://www.downtoearthservices.co.uk/resources/tree2.gif">
<script>
  Benchmark.prototype.setup = function() {
    var canvas = document.getElementById("main");
    canvas.width = 601;
    canvas.height = 680;
    var ctx = canvas.getContext("2d");
    
    http: //www.downtoearthservices.co.uk/resources/tree2.gif
    var tile = document.createElement("canvas");
    tile.width = 601;
    tile.height = 680;
    tileCtx = tile.getContext("2d");
    var grad = tileCtx.createLinearGradient(0, 0, tile.width, tile.height);
    grad.addColorStop(0.0, "#FF0000");
    grad.addColorStop(1.0, "#00FFFF");
    tileCtx.fillStyle = grad;
    tileCtx.fillRect(0, 0, tile.width, tile.height);
    
    var img = document.getElementById("tree");
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

ctx.drawImage(img, 0, 0);

var size = 2;
for (var x = 0; x < size; ++x) {
  for (var y = 0; y < size; ++y) {
    ctx.drawImage(img, x / (size) * canvas.width, y / (size) * canvas.height, img.width / size, img.height / size);
  }
}

var size = 4;
for (var x = 0; x < size; ++x) {
  for (var y = 0; y < size; ++y) {
    ctx.drawImage(img, x / (size) * canvas.width, y / (size) * canvas.height, img.width / size, img.height / size);
  }
}

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

Compare results of other browsers

0 comments