getImageData Performance

JavaScript performance comparison

Test case created by John

Info

Checking to see the performance of getImageData for various widths and heights.

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

0 comments

Add a comment