Canvas getImageData() For optimal performance. To pull out all data or one at a time?

Question

I need to scan through every pixel in a canvas image and do some fiddling with the colors etc. For optimal performance, should I grab all the data in one go and work on it throu

Answer 1

It depends on what exactly you're doing, but I'd suggest grabbing it all at once, and then looping through it.

Grabbing it all at once is faster than grabbing it pixel by pixel, since searching through an array is a lot faster than searching through a canvas, once for each pixel.

If you're really in need of speed, look into web workers. You can set each one to grab a specific section of the canvas, and since they can run simultaneously, they'll make much better use out of your CPU.

getImageData() isn't really slow enough for you to notice the difference if you were to grab it all at once or individually, in my experiences using the function.