Fill HTML canvas excluding arbitrary (possibly overlapping) circles

Given an HTML canvas that has already been drawn to, what's the best way to shade the whole canvas except given circular regions? (in context: shadows except where are there light sources)

I was hoping it would be as simple as a rect() followed by subsequent arc()s, but AFAIK there's no way to "remove" those circular sections after the fact. I can get close ( http://jsfiddle.net/mW8D3/2/), but the overlapping r开发者_如何学运维egions of circles end up shaded (in XOR fashion, whereas I want OR). Using clip() has the same problem.

I've also tried using globalCompositeOperation but can't quite seem to achieve what I want.

Any ideas?

You could first create the shadow image on a second canvas and knock out holes from it with globalCompositeOperation 'copy' and a transparent fillStyle.

Like this: http://jsfiddle.net/mW8D3/4/