That is the Pixel manipulation way.
It is (very) slow, because of getImageData/putImageData. It does give you full control.
The much faster way (if you had to do it every frame), is using compositing.
Draw a filled rectangle in the color you want to tint with.
Then set context.globalCompositeOperation = 'multiply';
Now draw your image.
You now have a tinted image (rectangular).
To get rid of the rectangle, now set context.globalCompositeOperation = 'destination-atop';
And draw your image again. Only the overlap remains.
1 Like