Clear canvas methods speed

Benchmark created on

Description

Check the performance of different canvas clear methods

Preparation HTML

<canvas id="c1" width="800" height="600"/>

Setup

var ctx = c1.getContext('2d');
var imageData = ctx.getImageData(0,0, 800, 600)
imageData.data.set(new Uint8ClampedArray(800*600*4))
ctx.fillStyle="#FFFFFF"

Test runner

Ready to run.

Testing in
TestOps/sec
clearRect
ctx.clearRect(0,0,800, 600)
ready
reset transform
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,800, 600);
ctx.restore();
ready
save transform to local variable
var t = ctx.getTransform();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,800, 600);
ctx.setTransform(t);
ready
update height hack
c1.height+=0
ready
fill canvas with some color
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
// moved fillStyle to initialize
ctx.fillRect(0,0,800, 600);
ctx.restore();
ready
set saved empty data
ctx.putImageData(imageData,0,0);
ready
fill with color
// moved fillStyle to initialize
ctx.fillRect(0,0,800, 600)
ready

Revisions

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