ColorProps tinting Canvas

[bm1967 1 Likes (Newbie)]

Hi

 

I'm learning to use the ColorProps plugin and was wondering if anyone can direct me how (from a mouse event) to colour tint a loaded bitmap that's been drawn into a Canvas object.

 

I've prepared an example on CodePen where the scale is being tweened but the bitmap image is not 

 

 

Many thanks in advance

See the Pen epPoJy?editors=101 by anon (@anon) on CodePen

[OSUblake 18,432 Likes (Superhero)]

Tinting an image is not that straightforward. It might be easier to use a library. I just made this a couple of days ago using Pixi. It not only cycles through some tints, but also uses a hue filter at the beginning.

 

See the Pen bae3548a3fae7941155290c6ef10273a?editors=001 by osublake (@osublake) on CodePen

 

If you don't want to use a library, here's a good article explaining how to tint an image. You could use GSAP to do this on the onUpdate callback.

 

http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/