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) where particles change colors over time etc. I am not asking how to tint the whole canvas, only the current image i am about to draw.

I have concluded that the globalAlpha parameter affects the current image that is drawn.

//works with drawImage()
canvas2d.globalAlpha = 0.5;

But how do i tint each image with an arbitrary color value ? It would be awesome if there was some kind of globalFillStyle or globalColor or that kind of thing...

EDIT:

Here is a screenshot of the application i am working with: http://twitpic.com/1j2aeg/full

Answer 1

When I created a particle test I just cached images based on rotation (like 35 rotations), color tint, and alpha and created a wrapper so that they were created automatically. Worked well. Yes there should be some kind of tint operation, but when dealing with software rendering your best bet much like in flash is to cache everything. Particle Example I made for fun

Answer 2

I am also looking for this answer, i have taken a good look at this: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html but i could not find how it is intended to be done.

Answer 3

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.