How to write animation for canvas pie chart?

Question

JavaScript

I want to implement a pie chart with expansion animation.
There were no problems with the diagram itself, but with the animation there are big problems, in fact, someone can help with this.
Everything is done in pure JS.

(function () {
    let canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        data = [
            {
                data: "STR",
                count: 2
            },
            {
                data: "STR",
                count: 9
            },
            {
                data: "STR",
                count: 3
            },
            {
                data: "STR",
                count: 6
            },
            {
                data: "STR",
                count: 6
            },
        ],
        config = {
            radius: 100,
        };

    class Circle {
        constructor(data) {
            this.cx = w / 2;
            this.cy = h / 2;
            this.radius = data.radius || config.radius;
            this.startAngle = data.startAngle;
            this.endAngle = data.endAngle;
            this.fill = data.fill || false;
            this.stroke = data.stroke || false;
            this.fillColor = data.fillColor || "black";
            this.strokeColor = data.strokeColor || "white";
            this.reverse = data.reverse || false
        }
        drawPart(){
            if(this.fillColor){
                ctx.fillStyle = this.fillColor
            }
            if(this.strokeColor){
                ctx.strokeStyle = this.strokeColor
            }
            ctx.beginPath();
            ctx.moveTo(this.cx, this.cy);
            ctx.arc(this.cx, this.cy, this.radius, this.startAngle, this.endAngle, this.reverse);
            ctx.lineTo(this.cx, this.cy);
            ctx.closePath();
            if(this.fill){
                ctx.fill()
            }
            if(this.stroke) {
                ctx.lineWidth = 5
                ctx.stroke();
            }
        }
    }

    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;

        init();
    }

    resizeCanvas();

    function init() {
        let maxCount = data.reduce ((a, b, index) => {
                if (index === 1) {
                    return a.count + b.count
                }
                return a + b.count
            }),
            startAngle = - Math.PI / 2;

        for (let i = 0; i < data.length; i++){
            let endAngle = ((data[i].count / maxCount) * Math.PI) * 2 + startAngle,
                circle = new Circle ({
                    startAngle: startAngle,
                    endAngle: endAngle,
                    fill: true,
                    stroke: true
                });
            circle.drawPart();
            startAngle = endAngle
        }
    }
}());

Example: here

Answer 1