<m2qea4e10a51004280309k8a2bf953oa290a2f83d6f3871@mail.gmail.com>
Current votes: None.
--===============7138684635758069830== Content-Type: multipart/alternative; boundary=0016367d68563b864f048549359a --0016367d68563b864f048549359a Content-Type: text/plain; charset=ISO-8859-1 Thank you for your input Philip, 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. Here is a screenshot of the application i am making wich is a performance comparison between current flash and canvas implementations. Hopefully sometime in the future if we get full hardware acceleration on canvas it will be faster than flash. http://twitpic.com/1j2aeg/full http://twitpic.com/1j2aeg <http://twitpic.com/1j2aeg>I really look forward to other advice on how to best do this if someone has any input. Personally i think the canvas 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 ? Regards, Steve 2010/4/25 Philip Taylor <excors@gmail.com> > On Sun, Apr 25, 2010 at 9:48 AM, Steve Olofsson <SteveOlofsson@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@gmail.com > --0016367d68563b864f048549359a Content-Type: text/html; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable <meta charset=3D"utf-8"><span class=3D"Apple-style-span" style=3D"font-fami= ly: arial, sans-serif; font-size: 13px; border-collapse: collapse; ">Thank = you for your input Philip,=A0<div><br></div><div>I am thinkin maybe i shoul= d 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 f= astest way, to never work directly with Image objects but with ImageData ob= jects.=A0</div> <div><br></div><div>Here is a screenshot of the application i am making wic= h is a performance comparison between current flash and=A0<span class=3D"il= " style=3D"background-image: initial; background-attachment: initial; backg= round-origin: initial; background-clip: initial; background-color: rgb(219,= 240, 250); background-position: initial initial; background-repeat: initia= l initial; ">canvas</span>=A0implementations. Hopefully sometime in the fut= ure if we get full hardware acceleration on=A0<span class=3D"il" style=3D"b= ackground-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>=A0it will be faster than flash.</div> <div><br></div><div><a href=3D"http://twitpic.com/1j2aeg/full" target=3D"_b= lank" style=3D"color: rgb(51, 102, 51); ">http://twitpic.com/1j2aeg/full</a= ><br><a href=3D"http://twitpic.com/1j2aeg" target=3D"_blank" style=3D"color= : rgb(51, 102, 51); ">http://twitpic.com/1j2aeg</a></div> <div><br></div><div><a href=3D"http://twitpic.com/1j2aeg" target=3D"_blank"= style=3D"color: rgb(51, 102, 51); "></a>I really look forward to other adv= ice on how to best do this if someone has any input. Personally i think the= =A0<span class=3D"il" style=3D"background-image: initial; background-attach= ment: initial; background-origin: initial; background-clip: initial; backgr= ound-color: rgb(219, 240, 250); background-position: initial initial; backg= round-repeat: initial initial; ">canvas</span>=A0specification should be up= dated 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 ImageDat= a 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=3D"= gmail_quote">2010/4/25 Philip Taylor <span dir=3D"ltr"><<a href=3D"mailt= o:excors@gmail.com">excors@gmail.com</a>></span><br><blockquote class=3D= "gmail_quote" style=3D"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=3D"mailto:Steve= Olofsson@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=3D"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 t= int as<br> > they grow older.<br> </div>> [...]<br> <div class=3D"im">> I have heard of solutions where you draw the image o= nto another canvas and<br> > tint that based on pixel values and then grab it and draw it on the ma= in<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 transpar= ency<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=3D"http://software.hixie.ch/utilities/js/live-dom-viewer/saved/460"= target=3D"_blank">http://software.hixie.ch/utilities/js/live-dom-viewer/sa= ved/460</a> - draw<br> the image onto a transparent canvas, draw a semi-transparent coloured<br> rectangle over it with globalCompositeOperation=3D'source-atop', an= d<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<b= r> 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=3D"#888888"><br> --<br> Philip Taylor<br> <a href=3D"mailto:excors@gmail.com">excors@gmail.com</a><br> </font></blockquote></div><br> --0016367d68563b864f048549359a-- --===============7138684635758069830== Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Content-Disposition: inline _______________________________________________ Help mailing list Help@lists.whatwg.org http://lists.whatwg.org/listinfo.cgi/help-whatwg.org --===============7138684635758069830==--