How to clear Path2D from canvas

Question

I am trying to make an animation by rendering Path2D into canvas in a loop. I need to clear or edit existing Path2D and put new one every few seconds. I have tried clearRect() method but it seems to not do anything. Here's my code:

update(options) {
    this.ctx.clearRect(0, 0, this.canvas.nativeElement.innerWidth, this.canvas.nativeElement.innerHeight);
    this.ctx.beginPath();
    const path = this.cardinal(options.points, true, 1); // SVG path
    const P2D = new Path2D(path);
    this.ctx.fill(P2D);
}

How to clear the path or maybe edit existing one?

FIX:

this.canvas.nativeElement.width, this.canvas.nativeElement.height

have been returning undefined. I had to use .width and .height properties of the canvas to make it work.

Answer 1

Unfortunately, once something has been painted onto canvas it will stay there. If you want to change one thing you need to repaint the whole.

And about the clearRect - the 3rd and 4th arguments shouldn't be the actual size of canvas node but rather it's resolution, ie it's width and height attribute, in your case: this.canvas.width and this.canvas.height