Yeah, I had exactly this problem before. I tried to wrap my head around how to actually do it geometrically, but thankfully had the much easier idea of just using the blend op.

This is super useful though! You don't always have the ability to change the blending op, or you could be rendering on top of something that might give you artifacts. Thankfully I was rendering something like this on a blank canvas.

That depends on whether you're drawing to a (temporary) buffer with alpha or drawing directly onto a background. Even if you can, it imposes limits on your overall compositing/drawing order.

I guess it can be done using stencil buffer trickery too. Using "max" instead of "+" will work, but is will be a different effect.

It requires EXT_blend_minmax or WebGL 2, but yes.