solid color: drawImage vs fillRect

JavaScript performance comparison

Test case created

Preparation code

<canvas id="c"/>
<script>
Benchmark.prototype.setup = function() {
    var ctx = document.getElementById("c").getContext("2d");
    var canvas2 = document.createElement("canvas");
    var ctx2 = canvas2.getContext("2d");
    ctx2.canvas.width = ctx2.canvas.height = ctx.canvas.width = ctx.canvas.height = X = 500;
    ctx2.fillRect(0, 0, X, X);
};
</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
fillRect
ctx.fillRect(0,0,X,X);
pending…
drawImage
ctx.drawImage(canvas2, 0, 0);
pending…

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

Add a comment