Пока цикл с запросом AnimtionFrame

Question

Я пытаюсь нарисовать временную линию на холсте HTML5 с помощью JavaScript. Я начал с while loop, но, похоже, он работает неправильно в функции requestAnimationFrame.

Оператор if работает нормально, но мне интересно, почему цикл while и функция requestAnimationFrame не работают вместе.

Этот код работает

var x = 50
function animate(){
    requestAnimationFrame(animate);
    c.beginPath();
    c.moveTo(50, halfway_y)
    c.lineTo(x, halfway_y)
    c.strokeStyle = "white"
    c.lineWidth = 5;
    c.stroke();
    if(x < canvas.width - 50){
        x+=7
    }

}

animate()

Этот код не работает . Код просто рисует линию без анимации.

var x = 50
function animate(){
    requestAnimationFrame(animate);
    c.beginPath();
    c.moveTo(50, halfway_y)
    c.lineTo(x, halfway_y)
    c.strokeStyle = "white"
    c.lineWidth = 5;
    c.stroke();

    while(x < canvas.width){
        x+=7
    }


}

animate()

Answer 1

 while(x < canvas.width){
      x+=7
 }

---

 if(x < canvas.width - 50){
     x+=7
 }

Два кодовых блока различны, while блоки позволяют x до canvas.width сразу, if блоки позволяют x увеличиваться только 7.

x = 0
while(x < canvas.width){
     x+=7
}
console.log(x);// x = 999

---

x = 0
if(x < canvas.width - 50){
     x+=7
}
console.log(x); // x = 7