Hello,<div><br></div><div>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.</div>

<div><br></div><div>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. </div>

<div><br></div><div><b>My Question:</b></div><div>I have not found an intended way to tint images on the fly. Is there an intended way ?</div><div><br></div><div>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.</div>

<div><br></div><div>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.</div>

<div><br></div><div>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.</div><div><br></div><div>I look forward to hearing answers about this question. I have a post about it on stackoverflow: <a href="http://stackoverflow.com/questions/2688961/how-do-i-tint-an-image-with-html5-canvas">http://stackoverflow.com/questions/2688961/how-do-i-tint-an-image-with-html5-canvas</a></div>

<meta charset="utf-8"><div><br></div><div>Regards / Steve</div>