canvas-clear (v2)

Revision 2 of this benchmark created on

Description

Test various canvas clearing methods

Preparation HTML

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

Setup

const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(20, 40, 120, 300);
ctx.rotate(30);
ctx.fillStyle = 'blue';
ctx.fillRect(-10, -40, 200, 100);
ctx.translate(40, 60);
ctx.fillStyle = 'green';
ctx.fillRect(100, 180, 50, 80);
ctx.fillStyle = 'yellow';
ctx.fillRect(180, 90, 120, 100);

Test runner

Ready to run.

Testing in
TestOps/sec
clearRect with setTransform
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ready
clearRect with setTransform and save/restore
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ready
clearRect with resetTransform
ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ready
clearRect with resetTransform and save/restore
ctx.save();
ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ready
canvas.width = canvas.width
canvas.width = canvas.width;
ready
canvas.width += 0
canvas.width += 0;
ready
ctx.reset
ctx.reset();
ready
with a flag (true)
if (true) ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (true) ctx.restore();
ready
with a flag (false)
if (false) ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (false) ctx.restore();
ready

Revisions

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