Как сделать анимированные фигуры которые не начинают свой путь с последнего места таймера, а с нуля?

Question

[PaveDUrov]

я делаю анимированные фигуры на canvas которые начинают свой путь с нуля и в конце пропадают, но когда я добавляю новые фигуры(пушу в массив с фигурами) они продолжают не с нуля, а уже с местоположения предыдущих фигур, подскажите пожалуйста как это исправить

export class HeartService implements Service {
    public start() {
        canvas = <HTMLCanvasElement>document.getElementById('cnvs');
        ctx = canvas.getContext("2d");
        animate();
    }

    public sendHeart() {
        heartsArray.push({
            x: 20,
            y: 0,
            width: 20,
            height: 20,
            borderWidth: 1,
            startPoint: 1000
        });
    }
    initialize() { }
}
var startTime = (new Date()).getTime();

function animate() {
    // call again next time we can draw
    requestAnimationFrame(animate);

    var linearSpeed = 100;

    var timeLinear = (new Date()).getTime() - startTime;
    var newY = linearSpeed * timeLinear / 1500;

    let opacity = "9";
    // let opacity = newY.toFixed(0);

    // clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw everything
    ctx.beginPath();
    heartsArray.forEach(
        (element: any): void => {
            ctx.fillStyle = "rgba(255, 165, 0, 1)";
            if (500 > newY) {
                ctx.rect(element.x, 500 - newY, element.width, element.height);
            }            
        }
    )
    ctx.globalAlpha = "0." + opacity;
    ctx.fill();
}