JS Canvas okrąg z użyciem setTimeout

Question

Witam,

mam problem z kodem, nie działa mi animacja w Canvas, która ma odmierzać czas do końca. Wiem, że problem leży gdzieś z if lecz nie potrafię go rozwiązać, pewnie to jakaś błachostka i jakiś magik będzie wiedział od razu gdzie jest błąd.

var seconds = 200;

function draw() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, seconds / 100 * Math.PI, true);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#000000';
  context.stroke();
  seconds--;
  if (seconds > 0) {
    setTimeout('draw()', 1000);
  }
  draw();

Dodam, że trochę poczytałem i rozwiązałem problem zmieniając koncepcję na animacje w CSS z podmienianymi klasami, lecz z czystej ciekawości chciałbym wiedzieć co było nie tak z tym JSem (nie mógłbym spać jeśli nie wiedziałbym jak to można rozwiązać). Z góry dziękuje, pozdrawiam

Answer 1

Stworzyłeś funkcję rekurencyjną, która sama siebie wywołuje w linijce 21 więc to na pewno by nie zadziałało dobrze.

Comments

Akurat funkcja rekurencyjna nic tu nie wadziła, zmieniłem metode na setInterval i działa. Dzięki za odp. pozdrawiam