getImageData Performance

JavaScript performance comparison

Revision 3 of this test case created by John

Preparation code 

<script language="JavaScript">
  var canvas = document.createElement('canvas');
  canvas.width = 1000;
  canvas.height = 1000;
  var context = canvas.getContext('2d');
  context.fillStyle = '#abc';
  context.fillRect(0, 0, 1000, 1000);
</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
One Pixel 
var data = context.getImageData(0, 0, 1, 1);
 pending…
One Pixel Center 
var data = context.getImageData(500, 500, 1, 1);
 pending…
10 by 10 
var data = context.getImageData(0, 0, 10, 10);
 pending…
30 by 30 
var data = context.getImageData(0, 0, 30, 30);
 pending…
900 by 1 
var data = context.getImageData(0, 0, 900, 1);
 pending…
1 by 900 
var data = context.getImageData(0, 0, 1, 900);
 pending…
100 by 100 
var data = context.getImageData(0, 0, 100, 100);
 pending…
200 by 200 
var data = context.getImageData(0, 0, 200, 200);
 pending…
500 by 500 
var data = context.getImageData(0, 0, 500, 500);
 pending…
1000 by 1000 
var data = context.getImageData(0, 0, 1000, 1000);
 pending…
1 by 100 
var data = context.getImageData(0, 0, 1, 100);
 pending…
1 by 200 
var data = context.getImageData(0, 0, 1, 200);
 pending…
1 by 500 
var data = context.getImageData(0, 0, 1, 500);
 pending…
1 by 1000 
var data = context.getImageData(0, 0, 1, 1000);
 pending…
Perimeter 
var data = context.getImageData(0, 0, 1, 1000);
data = context.getImageData(0, 999, 1, 1000);
data = context.getImageData(0, 1, 998, 1);
data = context.getImageData(999, 1, 1, 998);
 pending…
Small Perimeter 
var data = context.getImageData(0, 0, 1, 300);
data = context.getImageData(0, 299, 1, 300);
data = context.getImageData(0, 1, 298, 1);
data = context.getImageData(299, 1, 1, 298);
 pending…
Smaller Perimeter 
var data = context.getImageData(0, 0, 1, 100);
data = context.getImageData(0, 99, 1, 100);
data = context.getImageData(0, 1, 98, 1);
data = context.getImageData(99, 1, 1, 98);
 pending…
One Pixel Again 
var data = context.getImageData(0, 0, 1, 1);
 pending…
5 pixels 
var data = context.getImageData(0, 0, 1, 1);
data = context.getImageData(1, 1, 1, 1);
data = context.getImageData(2, 2, 1, 1);
data = context.getImageData(3, 3, 1, 1);
data = context.getImageData(4, 4, 1, 1);
 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