JQUERY function call not working?

Question

JavaScript

there is a code, after the end of the timer, requestAnimationFrame (animate) should work - rendering the canvas, but it does not work

//Таймер обратного отсчета
    let waitTimeShow = $('#waitTimeShow');
    let mutShow = $('#mutShow');

    let timerTime = 5;
    waitTimeShow.html(timerTime + "s");
    function timer(){
        timerTime--;
        waitTimeShow.html(timerTime + "s");
        if (timerTime == 0){
            requestAnimationFrame(animate);
            waitTimeShow.addClass('hide');
            mutShow.removeClass('hide');
            setTimeout(function(){},1000);
        } else {
            setTimeout(timer,1000);
        }
    }
    setTimeout(timer,1000);  

     function lerp(a,b,t) {
      return a + (b-a)*t 
    }

    function animate(t){
      t /= 2000; // Время анимации
      if (t > 1) return;
      let x = lerp(10, 590, t)
      let y = lerp(390, 100, t)
      ctx.clearRect(40, 40, canvas.width, canvas.height - 70);
      arrow({x: 40, y: canvas.height - 40}, {x, y}, 40);
      requestAnimationFrame(animate)
    }

    function arrow (p1, p2, size) {
      var angle = Math.atan2((p2.y - p1.y) , (p2.x - p1.x));
      var hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));

      ctx.save();
      ctx.translate(p1.x, p1.y);
      ctx.rotate(angle);

      // line
      ctx.strokeStyle = '#e4c358';
      ctx.lineWidth = "8";
      ctx.beginPath();  
      ctx.moveTo(0, 0);
      ctx.lineTo(hyp - size, 0);
      ctx.stroke();

      // triangle
      ctx.fillStyle = '#e4c358';
      ctx.beginPath();
      ctx.lineTo(hyp - size , size/2);
      ctx.lineTo(hyp, 0);
      ctx.lineTo(hyp - size, -size/2);
      ctx.fill();

      ctx.restore();

      ctx.fillStyle = '#e4c358ab';
      ctx.beginPath();
      ctx.lineTo(40,canvas.height - 40);
      ctx.lineTo(p2.x, p2.y);
      ctx.lineTo(p2.x,canvas.height - 40);
      ctx.fill();
    }