Home/ Questions/Q 5985305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:30:39+00:00

Given an HTML canvas that has already been drawn to, what’s the best way

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0