Заполнить HTML-холст, исключая произвольные (возможно, перекрывающиеся) круги

Question

Учитывая HTML-холст, к которому уже было обращено, каков наилучший способ закрасить весь холст, кроме заданных круговых областей? (в контексте: тени, кроме источников света)

Я надеялся, что это будет так же просто, как rect() с последующими arc() с, но AFAIK нет никакого способа "удалить" эти круглые секции после факта. Я могу приблизиться (http://jsfiddle.net/mW8D3/2/),, но перекрывающиеся области кругов заштрихованы (в стиле XOR, тогда как я хочу ИЛИ). Использование clip() имеет ту же проблему.

Я также пытался использовать globalCompositeOperation, но, похоже, не могу добиться того, чего хочу.

Есть идеи?

Answer 1

Вы можете сначала создать теневое изображение на втором холсте и выбить из него отверстия с помощью globalCompositeOperation 'copy' и прозрачного fillStyle.

Примерно так: http://jsfiddle.net/mW8D3/4/