canvas-clear

JavaScript performance comparison

Revision 42 of this test case created by

Preparation code 


      
      <script>

        Benchmark.prototype.setup = function() {

          
  var c = document.createElement('canvas');
  c.width = c.height = 500;
  
  var ctx = c.getContext('2d');
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, 500, 500);

        
  };
          



        Benchmark.prototype.teardown = function() {

          
  var p = ctx.getImageData(0, 0, 1, 1);

        
  };

      
</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
set width 
c.width = c.width;
 pending…
clear transform then clearRect 
// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);

// Restore the transform
ctx.restore();
 pending…
putImageData 
var data = ctx.createImageData(c.width, c.height);
ctx.putImageData(data, 0, 0); // clear context by putting empty image data
 pending…
null and new canvas 
c = null;
c = document.createElement('canvas');
c.width = c.height = 500;

var ctx = c.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 500, 500);
 pending…
fillRect 
ctx.save();
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.restore();
 pending…
clearRect 
ctx.clearRect(0, 0, c.width, c.height);
 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