canvas-clear

JavaScript performance comparison

Revision 27 of this test case created

Info

Different methods for clearing the canvas.

Preparation code

<canvas id="canvas" width="700" height="1000"></canvas>
<script>
Benchmark.prototype.setup = function() {
    var c = document.getElementById("canvas");
    var ctx = c.getContext('2d');
   
    ctx.fillStyle = '#F00';
    ctx.fillRect(0, 0, 700, 1000);
   
    var imageData = ctx.createImageData(c.width, c.height);
    ctx.fillStyle = 'rgba(0,0,0,0)';
   
    ctx.save();
   
    var toFill = false;
};

Benchmark.prototype.teardown = function() {
    ctx.restore();
   
    if (!toFill) {
      var p = ctx.getImageData(0, 0, 1, 1);
      if (p.data[3] != 0) throw ("canvas did not clear!");
    }
};
</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
clearRect
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0)";

ctx.clearRect(0, 0, c.width, c.height);

toFill = false; // should be transparent
pending…
set width
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0)";

c.width = c.width;

toFill = false; // should be transparent
pending…
putImageData
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0)";

ctx.putImageData(imageData, 0, 0);

toFill = false; // should be transparent
pending…
globalCompositeOperation = "copy"
ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.fillRect(0, 0, c.width, c.height);

toFill = false; // should be transparent
pending…
fillRect
ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, c.width, c.height);

toFill = true; // should be filled
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