getImageData Performance (v13)

Revision 13 of this benchmark created on

Description

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

Preparation HTML

<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

Ready to run.

Testing in
TestOps/sec
One Pixel
var data = context.getImageData(0, 0, 1, 1);
ready
One Pixel Center
var data = context.getImageData(500, 500, 1, 1);
ready
10 by 10
var data = context.getImageData(0, 0, 10, 10);
ready
30 by 30
var data = context.getImageData(0, 0, 30, 30);
ready
900 by 1
var data = context.getImageData(0, 0, 900, 1);
ready
1 by 900
var data = context.getImageData(0, 0, 1, 900);
ready
100 by 100
var data = context.getImageData(0, 0, 100, 100);
ready
200 by 200
var data = context.getImageData(0, 0, 200, 200);
ready
500 by 500
var data = context.getImageData(0, 0, 500, 500);
ready
1000 by 1000
var data = context.getImageData(0, 0, 1000, 1000);
ready
1 by 100
var data = context.getImageData(0, 0, 1, 100);
ready
1 by 200
var data = context.getImageData(0, 0, 1, 200);
ready
1 by 500
var data = context.getImageData(0, 0, 1, 500);
ready
1 by 1000
var data = context.getImageData(0, 0, 1, 1000);
ready
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);
ready
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);
ready
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);
ready
One Pixel Again
var data = context.getImageData(0, 0, 1, 1);
ready
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);
ready
500 by 500 centered
var data = context.getImageData(250, 250, 500, 500);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.