title: requestAnimationFrame too fast
body: <p>I am creating simple animation in canvas. I use requestanimationframe to control animation. There is 3 circle. But i can only see 3 circle and animation is too fast. My question is how can i slow my animation and how can show each frame. here is my live <a href="http://codepen.io/marmikdesai/pen/bWOjwj?editors=0010" rel="nofollow noreferrer">link</a>.</p>
  
  <pre><code>const swing = (time) =&gt; {
    for(var i = 0; i &lt; 3; i++) {
      circle[i] = new ball();
      circle[i].draw(i, circle[i].color);
    }
  
    requestAnimationFrame(swing);
  }
  
  requestAnimationFrame(swing);
  //swing();
  
  
  function ball(i){
      this.x = random(100, 150);
      this.y = random(40, 60);
      this.radius = 45;
      this.color = getRandomColor(random(1, 30));
      this.strokeText = "m"  
  
      ctx.clearRect(0, 0, el.width, el.height);
      this.draw = function(i, color){
          ctx.beginPath();
          ctx.font="30px Verdana";
          ctx.arc(i*this.x, this.y, this.radius, 0, 2*Math.PI, false);
          ctx.fillStyle = color;
          ctx.globalAlpha = 0.5;
          ctx.strokeText(i,i*this.x,this.y);
          ctx.fill();
          ctx.closePath();
      }
  }
  </code></pre>
  
  <p>Thanks in advance. </p>
  
  <p>Edited:- I am creating something similar like this:- <a href="http://codepen.io/jscottsmith/pen/oWyxjp?editors=1010" rel="nofollow noreferrer">http://codepen.io/jscottsmith/pen/oWyxjp?editors=1010</a></p>