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

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.

Share Improve this question asked May 16, 2012 at 21:53 Boriana DitchevaBoriana Ditcheva 2,01516 silver badges26 bronze badges
Add a ment  | 

1 Answer 1

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745648587a4638119.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信