Rysowanie lini po kolei z opoznieniami

Chciałbym narysowac 2 linie, pierwsza rysuje sie po 3sek od wlaczenia przegladarki, następnie jak pierwsza skonczy sie rysowac powinna zaczac rysowac sie druga, jednak nie moge dojsc do tego jak to zrobic, w kodzie ktory ponizej zamieszczam rysuja sie one obydwie naraz

Moglby ktos pomoc ?

 var amount = 0;
 var amountt=1;
var startX = 0;
var startY = 0;
var endX = 500;
var endY = 300;
var startXx = 0;
var startYy = 0;
var endXx = 500;
var endYy = -300;


setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.01; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }
        
        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        ctx.stroke();
        
        
        
        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(startXx + (endXx - startXx) * amount, startYy + (endYy - startYy) * amount);
        ctx.stroke();
        
        
    }, 0);

}, 3000);
 

var linie = [
  {
    startX: 125,
    startY: 100,
    endX: 380,
    endY: 110
  },
  {
    startX: 383,
    startY: 108,
    endX: 102,
    endY: 267
  },
  {
    startX: 100,
    startY: 266,
    endX: 407,
    endY: 272
  }
]; // zorro
 
setTimeout(function() {
 
    var linia = linie.shift();
    var amount = 0;
    var interval = setInterval(function() {
        if(linia === undefined) clearInterval(interval);

        amount = Math.min(1, amount + 0.01); // change to alter duration

        ctx.strokeStyle = "black";
        ctx.lineWidth=1;
        ctx.strokeStyle="#707070";
        ctx.moveTo(linia.startX, linia.startY);
        // lerp : a  + (b - a) * f
        ctx.lineTo(linia.startX + (linia.endX - linia.startX) * amount, linia.startY + (linia.endY - linia.startY) * amount);
        ctx.stroke();

        if (amount >= 1) {
            amount = 0;
            linia = linie.shift();
        }
    }, 0);
 
}, 3000);

szafa gra i buczy, podziekowal niech Ci boza w dzieciach, alkoholu lub spokoju od baby wynagrodzi :)))

Ale mam pytanie, piekny skrypt do rysowania lini po kolei, idealny mozna stworzyc co sie chce, zorro supermena itp itd :)

ale w srodku potrzebuje ( rysuje 3-4-5 kreski) potem chce narysowac okrag o danych zmiennych ctx.arc(wwx,wwy,pita,katToRadians(0),katToRadians(360),true);
nastepnie wracam do kreslenia lini prostych wedlug zmiennych
i tu jest moj bol

jak w srodku tego programu wrzucic okrag (po zalozmy 3 kreskach) o zadanych parametrach ( nie musi sie rysowac moze pojawic sie Od razu) , a potem wrocic do rysowania kolejnych linii ...

komplikujesz
lepiej jakbyś od razu napisał co chcesz uzyskać, bo nie można ot tak sobie po trochu dodawać rzeczy do założeń bo zazwyczaj wiąże się to z przebudowaniem całej struktury skryptu
co nie znaczy że masz liczyć że ktoś za Ciebie wszystko napisze - mi się akurat nudzi

Math.PI2 = Math.PI * 2;

function Linia(startX, startY, endX, endY) {
  this.startX = startX;
  this.startY = startY;
  this.endX = endX;
  this.endY = endY;
}

Linia.prototype.lerp = function(t) {
  return {X: this.startX + (this.endX - this.startX) * t,
          Y: this.startY + (this.endY - this.startY) * t};
};

function Okrag(oX, oY, radius) {
  this.oX = oX;
  this.oY = oY;
  this.radius = radius;
}

var obiekty = [
    new Linia(165, 340, 270, 30),
    new Linia(248, 41, 362, 337),
    new Okrag(250, 200, 150),
    new Linia(80, 196, 407, 188)
];
 
setTimeout(function() {
 
    var obiekt = obiekty.shift();
    var amount = 0;
    var interval = setInterval(function() {
        if(obiekt === undefined) clearInterval(interval);
 
        amount = Math.min(1, amount + 0.01); // change to alter duration
 
        ctx.strokeStyle = "black";
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#707070";

        // gwałcimy literkę "L" jak "Liskov"
        if (obiekt instanceof Linia) {
          var linia = obiekt;
          var p = linia.lerp(amount);
          ctx.moveTo(linia.startX, linia.startY);
          ctx.lineTo(p.X, p.Y);
          ctx.stroke();
        } else
        if(obiekt instanceof Okrag) {
          var okrag = obiekt;
          ctx.moveTo(okrag.oX + okrag.radius, okrag.oY);
          ctx.arc(okrag.oX, okrag.oY, okrag.radius, 0, amount * Math.PI2);
          ctx.stroke();
        }
      
        if (amount >= 1) {
            amount = 0;
            obiekt = obiekty.shift();
        }
    }, 0);
 
}, 3000);