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

[Steve Olofsson]

Hello,

I have a question related to drawing images using the drawImage(...) method
on the canvas element. I am currently working on a thesis project at the
Royal Institute of Technology in Stockholm where i compare high performance
2d graphics for game development between current canvas implementations and
current flash version. I have come across a slight problem on the way.

My particle test currently utilizes scaing, rotation, different blending and
alpha values. But, 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.

*My Question:*
I have not found an intended way to tint images on the fly. Is there an
intended way ?

My proposal if there is not a way is that there could be a global color
value just as there is a global alpha value. When you draw an image, the
global color value gets applied to the image with a tinting operation. An
alternative would be to have another parameter in the drawImage(....,
"rgb(255, 100, 0, 0.5)") where you could include color value to be applied.
This would be very useful for game developers.

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.

I have also heard of solutions where you cache images and stuff, but i dont
see this as a viable alternative since it should be possible to do it on the
fly.

I look forward to hearing answers about this question. I have a post about
it on stackoverflow:
http://stackoverflow.com/questions/2688961/how-do-i-tint-an-image-with-html5-canvas

Regards / Steve
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100425/ae28c307/attachment-0001.htm>