Info

Different methods for clearing the canvas.

Preparation code

 
<script>
  Benchmark.prototype.setup = function() {
    var c = document.createElement('canvas');
    c.width = 1920;
    c.height = 1080;
    
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 1920, 1080);
    
    var fill, global;
    
  };

  Benchmark.prototype.teardown = function() {
    var p = ctx.getImageData(0, 0, 1, 1);
    if (p.data[3] != 0) throw ("canvas did not clear!");
  };
</script>

Test runner

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

Java applet disabled.

ctx.clearRect(0, 0, c.width, c.height);
 

global = ctx.globalCompositeOperation;
fill = ctx.fillStyle;
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.globalCompositeOperation = global;
ctx.fillStyle = fill;

c.width = c.width;

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 on 30th April 2013

0 comments