Which of the existing methods for changing the brightness of an image (HTML5 Canvas) is faster?

Question

Canvas

Now, as part of the project, I had to implement a simple function that changes the brightness of the image. I was very surprised by the results - on the desktop, a mediocre picture (~ 1000x1000) is processed in some 8ms. On iOS, the same picture is processed in 1050ms (iOS7.1, iPhone5). I tried to rotate cycles and all sorts of other things ... all to no avail.
jsperf.com/canvas-adjust-brightness
Actually, can you do it all even faster?

Answer 1

In short, I researched... I decided to indulge in mixing colors. Bottom line:
jsfiddle.net/2MHPh/2
True, the acceleration here is only to increase the brightness. There are no methods for color subtraction, and in order to achieve a reduction in brightness by addition, you need to invert the image twice (the source can be inverted before operations in advance, and the result). In this case, the performance will be clearly the same.
jsperf.com/imagedata-manipulations - performance comparison. Each test case is essentially an event handler for changing the brightness value.
Update:
Made an inversion via the "difference" blending mod.
jsfiddle.net/sjGcA/2
is now a complete implementation. The difference is worth watching on mobile devices.

Answer 2

Well, as an option, you can use such wonderful things as
Uint8Array
ArrayBuffer
instead of arrays . working with binaries as with arrays. but browser support may not please, and I haven’t encountered such a problem at close range and I’m not sure about this solution, but it should definitely be faster

Answer 3

A Chinese tablet with a stock browser says that it does everything in 71ms. Opera in 750ms.
cssdeck.com/labs/mgsdr9zc