[Animate Radius of Circle Path2d Canvas]

I created a minimal Demo with my Current "structure"

 

See the Pen poZPJZg by lukico_ (@lukico_) on CodePen

[Animate Radius of Circle Path2d Canvas]

Hey All

Im currently programming a little Angular application which uses a Canvas to display additional Information about Content on the Canvas when clicking on it. This works as intended but now i wanted to animate the current highlighted/selected Circle on that Canvas.

 

I have a Circle Class with the Path2D Object and a draw function 

export class Circle {
    private object: Path2D;
    id: string;
    private radius: number;
    private x: number;
    private y: number;
    constructor(x, y, radius, id) {
        this.id = id;
        this.object = new Path2D();
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.object.arc(x, y, this.radius, 0, 2 * Math.PI);
    }
    draw(ctx, color) {
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.fill(this.object);
    }
}

My Idea was to use Gsap.To  to animate the Radius Size of my objects, but for some reason i cant seem to understand how i could accomplish that.

Thanks for your help!