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

[Steve Olofsson]

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 at gmail.com>

> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100428/ad3693a0/attachment-0002.htm>