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!