canvas-clear (v37)

Revision 37 of this benchmark created on

Description

Different methods for clearing the canvas.

Setup

var c = document.createElement('canvas');
    c.width = c.height = 500;
    
    var ctx = c.getContext('2d');
    ctx.fillStyle = 'rgba(255,255,255,1)';
    ctx.fillRect(0, 0, 500, 500);
    var data = ctx.createImageData(c.width, c.height);
    
    var emptyCanvas = document.createElement('canvas');
    emptyCanvas.width = emptyCanvas.height = 500;
    var ctx1 = emptyCanvas.getContext('2d');
    //ctx1.fillStyle = 'rgba(0,0,0,0)';
    //ctx1.fillRect(0, 0, 500, 500);
    
    var emptyImage = new Image;
    emptyImage.src = emptyCanvas.toDataURL();

Teardown


    /*var p = ctx.getImageData(0, 0, 1, 1);
    console.log(p.data[3]);
    if (p.data[3] != 0) throw ("canvas did not clear!");*/

Test runner

Ready to run.

Testing in
TestOps/sec
draw Image
ctx.drawImage(emptyCanvas , 0, 0);
ready
fillRect
ctx.save();
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.restore();
ready
set width
c.width = 0;
c.width = c.width;
ready
clear transform then clearRect
// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);

// Restore the transform
ctx.restore();
ready
putImageData
ctx.putImageData(data, 0, 0); // clear context by putting empty image data
ready
clearRect
ctx.clearRect(0, 0, c.width, c.height);
ready

Revisions

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