Forums » Impact Engine » Possible optimization when doing canvas data manipulation

Hi

Saw stats on using canvas imagedata.data vs saving reference to imagedata.data
and then just using that reference to access the pixel data.

Apparently its faster if you use the reference. I assume if you call imagedata.data there is a com interface call involved.

Section A uses imagedata.data vs Section B that uses reference to imagedata.data
thus only 1 interface call.

Haven't tested this myself, but maybe someone else has tried this.

====> SECTION A <=====
var scaled = ig.$new('canvas');
scaled.width = widthScaled;
scaled.height = heightScaled;
var scaledCtx = scaled.getContext('2d');
var scaledPixels = scaledCtx.getImageData( 0, 0, widthScaled, heightScaled );

for( var y = 0; y < heightScaled; y++ ) {
for( var x = 0; x < widthScaled; x++ ) {
...
...
scaledPixels.data[ indexScaled ] = origPixels.data[ index ];
scaledPixels.data[ indexScaled+1 ] = origPixels.data[ index+1 ];
scaledPixels.data[ indexScaled+2 ] = origPixels.data[ index+2 ];
scaledPixels.data[ indexScaled+3 ] = origPixels.data[ index+3 ];
}
}


====> SECTION B <=====
var scaled = ig.$new('canvas');
scaled.width = widthScaled;
scaled.height = heightScaled;
var scaledCtx = scaled.getContext('2d');
var scaledPixels = scaledCtx.getImageData( 0, 0, widthScaled, heightScaled );
var scaledPixelData = scaledPixels.data;

for( var y = 0; y < heightScaled; y++ ) {
for( var x = 0; x < widthScaled; x++ ) {
...
...
scaledPixelData[ indexScaled ] = origPixelData[ index ];
scaledPixelData[ indexScaled+1 ] = origPixelData[ index+1 ];
scaledPixelData[ indexScaled+2 ] = origPixelData[ index+2 ];
scaledPixelData[ indexScaled+3 ] = origPixelData[ index+3 ];
}
}

.H

Could you link the source article?

Since the interpreter doesn&039;t have to traverse the object tree each iteration to access the #.data property, I'd expect a slight performance increase.

A jsperf could be setup to see if the performance is significant.

I did a quick search and this is the article that was referenced by another I had scanned:
"http://www.onaluf.org/en/entry/13"


As for jsperf - I had searched the site after posting here, but didn't find any tests on getImageData.data that were relevant to this topic.

I did see tests on jsperf before that mentioned and proved that one should do as little DOM calls as possible when in a loop (or in draw/update proc)

e.g. instead of calling:

document.getElementById(eleID).width = newWidth

in each frame update loop, rather query the dom interface only once:

eleIDReference = document.getElementById(eleID)
eleWidth = eleIDReference.width

and then in each frame update loop:

eleWidth = newWidth

(unfortunately can't find that link)

I created a jsperf test. See link below and feel free to run test..

http://jsperf.com/getimagedata-data-performance-test

.H

26% Faster - Very Nice! The original article you linked is two years old. Crazy how expensive a single look-up can be, even after all this time.

My improvement is only like 18% but an improvement never-the-less. When it is being called a million times it really adds up! ;)