CODEWITHSUNDEEP
htmlcanvas
wachunga
wachunga

Reputation: 231

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 regions 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?

Upvotes: 0

Views: 413

Answers (1)

Ilmari Heikkinen
Ilmari Heikkinen

Reputation: 2751

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/

Upvotes: 1

Related Questions