如何在 html 5 画布中删除区域的剪辑

Question

I am working with clip() in canvas.

I have made a region to clip() , as specified below

this.svgRenderer.ctx.rect(positionX, positionY, Width, Height);
this.svgRenderer.ctx.clip();

After few drawing on the same canvas, I am trying to remove the clip for that region by using save() and restore() .

But I am making mistakes and can't get that. So suggest any other way to remove the clip for the specified region without using save() and restore()

Answer 1

.clip is a permanent context state change.

It can only be removed by wrapping it in .save and .restore .

ctx.save();
ctx.clip(); // assuming the clipping path was already declared
// draw whatever needs to be clipped
ctx.restore(); // reset the clipping region
               // (and any other attributes that have been modified since .save())

Changing the canvas element width will clear the context state (and remove clipping) but will also erase the existing drawings.