Preparation code

<canvas id="canvas">
</canvas>
<script>
  Benchmark.prototype.setup = function() {
    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.width = 100;
    tmpCanvas.height = 100;
    var tmpCtx = tmpCanvas.getContext("2d");
    tmpCtx.fillStyle = "red";
    tmpCtx.strokeStyle = "black";
    tmpCtx.lineWidth = 2;
    tmpCtx.fillRect(0, 0, 100, 100);
    tmpCtx.strokeRect(0, 0, 100, 100);

    var canvas = document.getElementById("canvas");
    canvas.width = 320;
    canvas.height = 320;
    var ctx = canvas.getContext("2d");

    var pattern = ctx.createPattern(tmpCanvas, "no-repeat");

  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

ctx.drawImage(tmpCanvas, ~~ (Math.random() * 220), ~~ (Math.random() * 220));

ctx.setTransform(1, 0, 0, 1, ~~ (Math.random() * 220), ~~ (Math.random() * 220));
ctx.drawImage(tmpCanvas, 0, 0);

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