canvas-clear

JavaScript performance comparison

Revision 53 of this test case created by

Preparation code

<script>
  var c = document.createElement('canvas');
  c.width = c.height = 500;
  var ctx = c.getContext('2d');
  ctx.fillStyle = 'rgba(0,0,0,1)';
  var path=new Path2D();
  path.rect(0,0,500,250);
</script>
    

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
clearRect
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.fillRect(0, 0, 1, 1);
  ctx.clearRect(0, 0, 500, 500);
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("clearRect does not clear");
pending…
fillRect
for (var i = 0; i < 100; i++) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0,0,0,1)';
  ctx.fillRect(0, 0, 1, 1);
  ctx.globalCompositeOperation = 'copy';
  ctx.fillStyle = 'rgba(0,0,0,0)';
  ctx.fillRect(0, 0, 500, 500);
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("fillRect does not clear");
pending…
set width
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.fillRect(0, 0, 1, 1);
  c.width = c.width;
}
var p = ctx.getImageData(0, 0, 1, 1);
if (p.data[3] != 0) throw ("set width does not clear");
pending…
xor
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillRect(1, 0, 1, 1);
  ctx.globalCompositeOperation = 'xor';
  ctx.fillRect(0, 0, 500, 500);
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("xor does not clear");
pending…
xor clipped (half area)
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillRect(0, 0, 1, 1);
  ctx.globalCompositeOperation = 'xor';
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, 500, 250);
  ctx.clip();
  ctx.fillRect(0, 0, 500, 500);
  ctx.restore();
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("xor clipped does not clear");
pending…
clearRect clipped (half area)
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.fillRect(0, 0, 1, 1);
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, 500, 250);
  ctx.clip();
  ctx.clearRect(0, 0, 500, 500);
  ctx.restore();
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("clearRect clipped does not clear");
pending…
destination-in
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillRect(0, 0, 1, 1);
  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillRect(1, 1, 0, 0);
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("destination-in does not clear");
pending…
destination-in clipped (half area)
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,1)';
for (var i = 0; i < 100; i++) {
  ctx.fillRect(0, 0, 1, 1);
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, 500, 250);
  ctx.clip();
  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillRect(1, 1, 0, 0);
  ctx.restore();
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("destination-in clipped does not clear");
pending…
fill(path) (half area)
for (var i = 0; i < 100; i++) {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0,0,0,1)';
  ctx.fillRect(0, 0, 1, 1);
  ctx.globalCompositeOperation = 'copy';
  ctx.fillStyle = 'rgba(0,0,0,0)';
  ctx.fill(path);
}
var p = ctx.getImageData(0, 0, 1, 1);

if (p.data[3] != 0) throw ("fill(path) does not clear");
pending…

Compare results of other browsers

Revisions

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

0 Comments