canvas clearRect vs width (v5)

Revision 5 of this benchmark created by Jocelyn LECOMTE on

Description

When the current transformation isn't identity, clearRect may not work as intended. I added a test which saves the current canvas state, sets the transformation to identity before calling clearRect and restores the state.

Preparation HTML

<canvas id="testcanvas" width="512" height="512">
</canvas>

Setup

var canvas = document.getElementById('testcanvas');
    var context = canvas.getContext('2d');

Test runner

Ready to run.

Testing in
TestOps/sec
simple clearRect on the whole canvas
context.clearRect(0, 0, 512, 512);
ready
width hack
canvas.width = canvas.width;
ready
simple clearrect partial
context.clearRect(0, 0, 256, 256);
context.clearRect(0, 256, 256, 256);
context.clearRect(256, 0, 256, 256);
context.clearRect(256, 256, 256, 256);
ready
clearRect with saveState
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, 512, 512);
context.restore();
ready

Revisions

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