title: How to control requestAnimationFrame for waves speed
body: <p>I have to create a animation for waves . I need to control the speed of the waves depends on the availability of the <i>data</i>. Is it possible to speed up the waves. I'm using canvas for the waves.</p>
  
  <p>Thanks in advance </p>
  
  <p>Fiddle:<a href="https://jsfiddle.net/Chaitanya_Kumar/6ztr0Lfh/" rel="nofollow noreferrer">https://jsfiddle.net/Chaitanya_Kumar/6ztr0Lfh/</a></p>
  
  <pre><code>function animate() {
  
              if (x &gt; data.length - 1) {
                  return;
              }
  
              if (continueAnimation) {
                  requestAnimationFrame(animate);
              }
  
              if (x++ &lt; panAtX) {
  
                  var temp = data[x];
                  var final = constant-(temp);
                  ctx.fillRect(x, final, 1, 1);
                  ctx.lineTo(x, final);
                  ctx.stroke();
              } else {
  
                  ctx.clearRect(0, 0, canvas.width, canvas.height);
                                      ctx.beginPath();  // reset the path
  
  
                  for (var xx = 0; xx &lt; panAtX; xx++) {
                      var y = data[x - panAtX + xx];
                      var final = constant - (y);
                      ctx.fillRect(xx, final, 1, 1);
                      ctx.lineTo(xx, final);                        
                  }
                  ctx.stroke();
              }
          }
  </code></pre>