canvas-clear (v25)

Revision 25 of this benchmark created by Thomas Giles on

Description

Different methods for clearing the canvas.

Preparation HTML

<canvas id="canvas"></canvas>

Setup

var c = document.getElementById("canvas");
    c.width = 1700;
    c.height = 1000;
    
    var ctx = c.getContext('2d');
    
    ctx.fillStyle = '#F00';
    ctx.fillRect(0, 0, 1700, 1000);
    
    var imageData = ctx.createImageData(c.width, c.height);
    ctx.fillStyle = 'rgba(0,0,0,0)';
    
    ctx.save();
    
    var toFill = false;

Teardown


    ctx.restore();
    
    if (!toFill) {
      var p = ctx.getImageData(0, 0, 1, 1);
      if (p.data[3] != 0) throw ("canvas did not clear!");
    }

Test runner

Ready to run.

Testing in
TestOps/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
ready
set width
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0)";

c.width = c.width;

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

ctx.putImageData(imageData, 0, 0);

toFill = false; // should be transparent
ready
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
ready
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
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.