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

The way this would typically be done is with a "clipping region", where you make an area mask for which the drawing operations apply. HTML5 canvas has the ability to make a clipping mask that is the circle itself...

http://www.html5canvastutorials.com/tutorials/html5-canvas-clipping-region-tutorial/

...but it lacks the subtract() operation that's in Google Gears Canvas, which I spotted and they claimed is "from HTML5"...but apparently it is not.

Someone answered how to invert a clip() here, but it involves an off-screen canvas:

Canvas 'Clip' reverse action?

Hopefully someone else will have a better suggestion. :-/