Jump to content


Color tinting an image?

Moderator Tag

Recommended Posts

I'm trying to figure out how to simply tint an image using the colorProps plugin...

colorProps:{tint: 0xffffff, tintAmount: 1}

This doesn't seem to do anything... Am I missing something simple? All the examples I can find use Pixi or some other library. Is that necessary? I just want the image to tween to full white...

Link to comment
Share on other sites

There's a reason you see Pixi and other libraries being used for this. Real image tinting is not that straightforward. One thing you should know about tinting is that white removes a tint, so there will be no color changes to your image.


Here's a demo where you can set different tints. Notice how white just removes the tint.

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


What you're trying to do would involve something like a color transform or maybe some type of brightness filter. You can sort of lighten an image by using a canvas globalCompositeOperation, but that's still pretty involved as you have to loop through every pixel. On top of that, tweening it can be hard as you're adding 2 pixel rgb values together, so it's probably going to reach a max rgb value of 255 way before the tween even finishes.


If your only reason for using canvas is to color an image, it might be easier to do using SVG filters. However, if you're using canvas for other parts of your project, you can't go wrong with Pixi. It's coloring capabilities are pretty much unmatched. I've used it in projects strictly for it rendering capabilities, no animations.


You can test out some the color filters here.


  • Like 3
Link to comment
Share on other sites

Hm, that seems way more complicated than what I was hoping for, I just want to tween a thumbnail image in a grid into a full screen white box... Maybe better to use a white div underneath the image and then just fade it out so the white box shows up.


And I'm not using canvas at all, simply tweening divs. In AS3 this was super simple, so guess I just I assumed it would be in js as well. At least there's other solutions.



Link to comment
Share on other sites

Using canvas is the most common way to do stuff like changing an image's color, but you could also use SVG filters. Pretty much anything that you can do in Flash/AS3 is possible with canvas. The hard part is figuring out how to do it because the API is very limited. 


So here's something I came up that works more like you described. If you set the alpha to 1, the image will turn a solid color. 


See the Pen eJdvMX by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.