How to fill the 'opposite' shape on canvas?

Question

Say I have a circle (an arc) on HTML5 canvas. I can just fill it like this:

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

It works a t

Answer 1

Using the XOR function on a canvas mask only works with opaque fills (i.e. not compatible with globalAlpha). One way around this is to use the .clip() function and filling the clipped region with what you had in the background. Then, you can overlay the clipped region on top of the original canvas, on which you performed whatever fill you needed to.