[html5] A question about html5 canvas drawImage and tint / tinting

[Philip Taylor]

On Sun, Apr 25, 2010 at 9:48 AM, Steve Olofsson <SteveOlofsson at gmail.com> wrote:
> [...] i would also like to tint my images on the fly as i draw
> them. This would be used for example when rendering a particle fire effect
> where each particle starts out as yellow and moves towards a red-ish tint as
> they grow older.
> [...]
> I have heard of solutions where you draw the image onto another canvas and
> tint that based on pixel values and then grab it and draw it on the main
> canvas. However, i am assuming that this solution will 1. be slow and
> cumbersome to use on the fly, 2. i am assuming that you loose transparency
> data when you draw the image, because particle images will need to be
> partially transparent in most cases.

You can do a similar effect like
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/460 - draw
the image onto a transparent canvas, draw a semi-transparent coloured
rectangle over it with globalCompositeOperation='source-atop', and
then use that canvas as the source for a normal drawImage onto your
main canvas. That mostly preserves the transparency, as long as you
don't want the tinting too strong. If you want to simply multiply the
RGB channels without affecting A, then I think you'd have to use
getImageData/putImageData (which may be a bit slow, though it's full
RGBA so you won't lose transparency).

-- 
Philip Taylor
excors at gmail.com