canvas-clear (v14)

Revision 14 of this benchmark created by Ben Wong on

Description

Different methods for clearing the canvas.

Setup

var c = document.createElement('canvas');
    c.width = 1920;
    c.height = 1080;
    
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 1920, 1080);
    
    var fill, global;

Teardown


    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.clearRect(0, 0, c.width, c.height);
 
ready
fillRect
global = ctx.globalCompositeOperation;
fill = ctx.fillStyle;
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.globalCompositeOperation = global;
ctx.fillStyle = fill;
ready
set width
c.width = c.width;
ready

Revisions

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