nvgGlobalCompositeOperation not working

[mattychays]

I have tried to replicate exact HTML5 examples and cannot get the composite operations to work. Essentialy I'm trying to mask a Rect with a Circle, the NVG_ATOP composite operation does not seem to be working. I tried multiple times with different orders of paths as well. Thank you for the work on this awesome libray! I am trying to build avionics so without geometric clipping, blending has become my only method to mask elements.

[johnnovak]

Seconded, I couldn't get compositing work like in the HTML5 compositing examples. Some example code would be welcome.

[ghost]

Ha, I just had to play around with this recently. What I wanted to do is to draw some stuff using a XOR operation and started looking at the nvgGlobalCompositeOperation() function. Welp, it didn't worked at all.

I poked around the source code and realized that this function seems completely useless: because in the end, composite operations in nanovg will be handled by the opengl API glBlendFuncSeparate() (or nvgGlobalCompositeBlendFuncSeparate() in the nanovg userland, which a one to one mapping to the gl API).

In the case of NVG_XOR, the parameters transmitted to glBlendFuncSeparate() were:

• NVG_ONE_MINUS_DST_ALPHA
• NVG_ONE_MINUS_SRC_ALPHA
• NVG_ONE_MINUS_DST_ALPHA
• NVG_ONE_MINUS_SRC_ALPHA

Which is not what a XOR operation should be: I would have expected a NVG_ONE_MINUS_DST_COLOR (don't care about alpha).

So, this is the function call I end up using:

nvgGlobalCompositeBlendFuncSeparate(vg, NVG_ONE_MINUS_DST_COLOR, NVG_ZERO, NVG_ONE, NVG_ZERO);

In other words, forget nvgGlobalCompositeOperation() and try to understand how glBlendFuncSeparate() works, it will greatly help achieving what you want on the nanovg side, even though that API is a bit confusing to understand (or at least the official documentation would benefit from some examples for at least a few common use cases).

[johnnovak]

That's been helpful! I wonder why does nvgGlobalCompositeOperation even exist then... There's no examples in the demo app for it either, maybe it was never actually working correctly as intended. I certainly couldn't get it to do compositing like you could with Canvas it's claiming to mimic!

[olliwang]

You may find an example here: https://github.com/memononen/nanovg/pull/298

[johnnovak]

Thanks @olliwang