How do i tint an image with HTML5 Canvas?

Question

My question is, what is the best way to tint an image that is drawn using the drawImage method. The target useage for this is advanced 2d particle-effects (game development)

Answer 1

This question still stands. The solution some seem to be suggesting is drawing the image to be tinted onto another canvas and from there grabbing the ImageData object to be able to modify it pixel by pixel, the problem with this is that it is not really acceptable in a game development context because i basically will have to draw each particle 2 times instead of 1. A solution i am about to try is to draw each particle once on a canvas and grabbing the ImageData object, before the actual application starts, and then work with the ImageData object instead of the actual Image object but it might prove kind of costly to create new copies since i will have to keep an unmodified original ImageData object for each graphic.