CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Jaya
Jaya

Reputation: 263

How to remove the clip of a region in html 5 canvas

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()

Upvotes: 20

Views: 12467

Answers (1)

markE
markE

Reputation: 105015

.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 or calling .reset() will clear the context state (and remove clipping) but will also erase the existing drawings.

Upvotes: 41

Related Questions