How to make animated figures that do not start their journey from the last place of the timer, but from scratch?

Question

JavaScript

I make animated shapes on canvas that start from scratch and disappear at the end, but when I add new shapes (push to an array with shapes) they continue not from scratch, but already from the location of the previous shapes, please tell me how to fix this

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();
}