title: How to move canvas left to right with that data array?
body: <p>Using same data array every time canvas moving but not continuously?</p>
  
  <p>How to move canvas line left to right with that data array ?</p>
  
  <p>if data array is completed use same data to continuously</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas id="canvas" width="160" height="160" style="background-color: black;"&gt;&lt;/canvas&gt;
          &lt;script type='text/javascript'&gt;
  
  
              var canvas = document.getElementById("canvas");
              var ctx = canvas.getContext("2d");
              ctx.fillStyle ="#dbbd7a";
              ctx.fill();
  
              var fps = 1000;
              var n = 0;
  
              drawWave();
              var data = [
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                  148,149,149,150,150,150,143,82,82,82,82,82,82,82,
              ];
  
              function drawWave() {
                  setTimeout(function () {
                      requestAnimationFrame(drawWave);
                      ctx.lineWidth="2";
                      ctx.strokeStyle='green';
                      ctx.clearRect(0, 0, canvas.width, canvas.height);
  
                      // Drawing code goes here
                      n += 1.5;
                      if (n &gt; 200) {
                          n = 0;
                      }
                      ctx.beginPath();
                      for (var x = 0; x &lt; n; x++) {
                          ctx.lineTo(x, data[x]);
                      }
                      ctx.stroke();
  
                  }, 1000/fps);
              }
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>