Filling a region with holes

I have a canvas yet drawn with a lot of things and now I want to fill a region defined as the whole canvas except for a few holes (my holes are complex shapes with arcs).

With only one hole, it's simple : I make a path by making first a subpath with the whole canvas rect and then making a second subpat开发者_Python百科h with opposite winding. So when I fill the resulting path I effectively fill my canvas except for the hole.

With a few holes, it works too as long as my holes don't intersect : in case of intersection this method fills the intersecting parts of my holes, which is not the desired result.

So here's the problem : How can I fill a shape with holes intersecting ?

For now I'd prefer not to try to compute explicitly the union of my shapes because of their complexity (arcs involved...). That's the reason why I didn't try with getImageData().

Here's a graphical explanation :

This should be very fast as both the source canvas and the holes are animated but there is almost never more than 3 holes on screen.

---

I'm not sure I see what the problem is. You just wanna draw paths on top of something and fill the union of the paths?

That's easy to do on Canvas. Canvas lets you draw paths as well as subpaths, and you'll want to draw a series of multiple subpaths (but only a single path). To avoid winding, you'll want to draw all of the subpaths in the same direction (clockwise or counter-clockwise).

Here's an example of one path, that is really the the union of two subpaths, making a "hole":

http://jsfiddle.net/KX8Xf/

Note that I only call BeginPath once and then use closePath and moveTo to start my new subpath.

If you want to fill the inverse of this you can fill an in-memory canvas, draw the path as a clipping region to the in-memory canvas, draw your normal canvas to the in-memory canvas, and then draw the in-memory canvas back to your normal canvas. Here's an example of that