clearRect Performance

JavaScript performance comparison

Revision 8 of this test case created

Info

Compares HTML 5 canvas clear call. This test compares the performance of calling the canvas.clearRect() for the whole canvas as a opposed to calling canvas.clearRect() many times for a smaller area.

Preparation code

<canvas id="mainCanvas" width="800" height="600">
<rect width="100" height="100" x="0" y="0" stroke="red" fill="green"/>
<rect width="100" height="100" x="100" y="100" stroke="red" fill="green"/>
<rect width="100" height="100" x="200" y="0" stroke="red" fill="green"/>
</canvas>
<script>
Benchmark.prototype.setup = function() {
    var canvas = document.getElementById("mainCanvas");
    var ctx = canvas.getContext("2d");
};
</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
Clear Full Canvas using canvas.width, canvas.height
ctx.clearRect(0, 0, 800, 600);
pending…
Clear full canvas using constant width/height
canvas.width = canvas.width;
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