javascript - Is there a way to clear a non-rectangular area in a canvas element? - Stack Overflow

Using javascript, I've drawn several polygon images on my canvas.

I'd like to, based on user events/clicks, be able to clear a section of the canvas (one of those polygon images), which is an irregular shape, not a rectangle.

So, I cannot use clearRect() for my purpose.

Can anyone think of a way I can do that?

Essentially, I'd like to make a portion of my canvas transparent, but it is not a rectangular shape... Once I have an area defined with which I can fill() and stroke(), can I not also clear() it... I know that such a function is not available. What are folks doing to clear irregularly shaped sections?

I'm a little new to this, so apologies in advance if this sounds like a silly question.

Using javascript, I've drawn several polygon images on my canvas.

I'd like to, based on user events/clicks, be able to clear a section of the canvas (one of those polygon images), which is an irregular shape, not a rectangle.

So, I cannot use clearRect() for my purpose.

Can anyone think of a way I can do that?

Essentially, I'd like to make a portion of my canvas transparent, but it is not a rectangular shape... Once I have an area defined with which I can fill() and stroke(), can I not also clear() it... I know that such a function is not available. What are folks doing to clear irregularly shaped sections?

I'm a little new to this, so apologies in advance if this sounds like a silly question.

• javascript
• canvas

Share Improve this question Follow asked May 16, 2012 at 21:53 Boriana DitchevaBoriana Ditcheva 2,0151616 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Use ctx.clip() to define the current stroke as a clipping region.

See https://developer.mozilla/en/Canvas_tutorial/Compositing

I also created a demo at http://jsfiddle/alnitak/6ABp7/

The clipping path is part of the graphics state, so you can .save() the previous state, set clipping, draw some more stuff, and then .restore() the original state.