clearRect Performance

JavaScript performance comparison

Revision 8 of this test case created


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"/>
Benchmark.prototype.setup = function() {
    var canvas = document.getElementById("mainCanvas");
    var ctx = canvas.getContext("2d");

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);
Clear full canvas using constant width/height
canvas.width = canvas.width;

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment