Using partially transparent images as brushes on bitmapData

[Marsu]

I try to create a painting tool that makes it possible to paint on a bitmapData texture. So far that works quite well.

But I also want to have soft-edged tools like airbrushes. For that I use a tinted image that uses a radial alpha-gradient. (middle solid, going transparent to the outside)

 

This works quite well, but with a few colors I get weird effects on the borders. When drawing multiple images over each other (like forming a line or filling an area), the borders seem to be darker. This is not visible with primary colors, but pastels make it quite visible.

 

I tried futzing around with pixel rgba values, blending modes and a few other things, but nothing fixes it.

 

Does anybody have any idea what causes this?

 

Attached image for demonstration

[jmp909]

I'm guessing it's related to this

http://www.html5gamedevs.com/topic/17676-double-buffered-rendertexture-trail-never-reaches-0-alpha/

[Marsu]

@jmp909 Did you find any solution to that problem?

[Marsu]

I have now prefilled a white background into the bmp and use the "source-atop" compositing mode instead of "source-over". 

That fixed the issue, but I have NO CLUE as to why.

Of course, this works only with a solid background in place, otherwise everything added on top would get the transparency of the destination pixels applied (in case of not background: be invisible)

 

 

It seems that there are some rounding errors or something when adding semi-transparent pixels on top of each other in the "source-over" mode. See the attached image where I repeatedly added the brush at the same location.

[jmp909]

No marsu, have a look at chg' response...

http://www.html5gamedevs.com/topic/17676-double-buffered-rendertexture-trail-never-reaches-0-alpha/?p=99592

I don't see how that can be resolved other than at a low level