<meta charset="utf-8"><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 13px; border-collapse: collapse; ">Thank you for your input Philip, <div><br></div><div>I am thinkin maybe i should grab an ImageData of each of my images to be used, and then make modified copies of those dynamically as i draw graphics. Maybe that should be the fastest way, to never work directly with Image objects but with ImageData objects. </div>

<div><br></div><div>Here is a screenshot of the application i am making wich is a performance comparison between current flash and <span class="il" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(219, 240, 250); background-position: initial initial; background-repeat: initial initial; ">canvas</span> implementations. Hopefully sometime in the future if we get full hardware acceleration on <span class="il" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(219, 240, 250); background-position: initial initial; background-repeat: initial initial; ">canvas</span> it will be faster than flash.</div>

<div><br></div><div><a href="http://twitpic.com/1j2aeg/full" target="_blank" style="color: rgb(51, 102, 51); ">http://twitpic.com/1j2aeg/full</a><br><a href="http://twitpic.com/1j2aeg" target="_blank" style="color: rgb(51, 102, 51); ">http://twitpic.com/1j2aeg</a></div>

<div><br></div><div><a href="http://twitpic.com/1j2aeg" target="_blank" style="color: rgb(51, 102, 51); "></a>I really look forward to other advice on how to best do this if someone has any input. Personally i think the <span class="il" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(219, 240, 250); background-position: initial initial; background-repeat: initial initial; ">canvas</span> specification should be updated to include this into the composite operation, that you could define a tint color. I also think there should be added a way to create an ImageData object with an Image object as indata. What do you think ?</div>

<div><br></div><div>Regards,</div><div>Steve</div></span><br><div class="gmail_quote">2010/4/25 Philip Taylor <span dir="ltr"><<a href="mailto:excors@gmail.com">excors@gmail.com</a>></span><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">

On Sun, Apr 25, 2010 at 9:48 AM, Steve Olofsson <<a href="mailto:SteveOlofsson@gmail.com">SteveOlofsson@gmail.com</a>> wrote:<br>
> [...] i would also like to tint my images on the fly as i draw<br>
<div class="im">> them. This would be used for example when rendering a particle fire effect<br>
> where each particle starts out as yellow and moves towards a red-ish tint as<br>
> they grow older.<br>
</div>> [...]<br>
<div class="im">> I have heard of solutions where you draw the image onto another canvas and<br>
> tint that based on pixel values and then grab it and draw it on the main<br>
> canvas. However, i am assuming that this solution will 1. be slow and<br>
> cumbersome to use on the fly, 2. i am assuming that you loose transparency<br>
> data when you draw the image, because particle images will need to be<br>
> partially transparent in most cases.<br>
<br>
</div>You can do a similar effect like<br>
<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/saved/460" target="_blank">http://software.hixie.ch/utilities/js/live-dom-viewer/saved/460</a> - draw<br>
the image onto a transparent canvas, draw a semi-transparent coloured<br>
rectangle over it with globalCompositeOperation='source-atop', and<br>
then use that canvas as the source for a normal drawImage onto your<br>
main canvas. That mostly preserves the transparency, as long as you<br>
don't want the tinting too strong. If you want to simply multiply the<br>
RGB channels without affecting A, then I think you'd have to use<br>
getImageData/putImageData (which may be a bit slow, though it's full<br>
RGBA so you won't lose transparency).<br>
<font color="#888888"><br>
--<br>
Philip Taylor<br>
<a href="mailto:excors@gmail.com">excors@gmail.com</a><br>
</font></blockquote></div><br>