Major problem with setColor when using Canvas (not WebGL) and an image with semi-transparent pixels

If I have a PNG image that has varying degrees of opacity in its pixels (such as a soft-edged circle or something with an outer glow), the setColor command does not behave properly when rendering using Canvas only. Instead, the areas of transparency get darker and darker. This causes a huge problem in design. The WebGL version is the intended result and works flawlessly, but I’m trying to work with Canvas (renderMode:1).

Here are a few examples, using white source images and then setcolor(cc.c3b(255, 128, 64) but all colors exhibit the same problem.

These are the two test images used in the above examples:

From what I understand, it is the result of using the ‘lighter’ composite mode to combine the separate RGB channels of the source image (while adjusting the alpha based on the input color value). This is a fast and accurate color tinting method, but seems to suffer when the images have semi-transparent pixels as described above. I’ve had no luck coming up with a solution after one week of experimenting. Any help or suggestions would be greatly appreciated!

Hi sam,

If you don’t often make the picture color, I think you can use the original pixel operations to achieve the effect you want.

Best regards
David