Info

Different methods for clearing the canvas.

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)';
</script>

Test runner

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

Java applet disabled.

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");

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");

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");

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. Here’s a list of current revisions for this page:

• Revision 1: published by Ilmari Heikkinen on 1st June 2011
• Revision 3: published by Rob Boerman on 20th January 2012
• Revision 5: published by Kashey on 29th May 2012
• Revision 6: published on 22nd July 2012
• Revision 7: published on 24th August 2012
• Revision 8: published on 24th August 2012
• Revision 9: published by Prestaul on 5th September 2012
• Revision 10: published on 17th September 2012
• Revision 11: published by Matthew on 29th September 2012
• Revision 12: published by Leo Dutra on 5th October 2012
• Revision 14: published by Ben Wong on 10th December 2012
• Revision 15: published on 28th December 2012
• Revision 16: published on 28th December 2012 and last updated on 29th December 2012
• Revision 17: published on 8th February 2013
• Revision 18: published by Jarrod Oberto on 13th March 2013
• Revision 19: published by Jarrod Oberto on 13th March 2013
• Revision 20: published on 6th April 2013
• Revision 21: published 3 weeks ago

0 comments