title: How to draw ecg monitor in canvas using HTML5?
body: <p>I am  try is to draw ecg system in using canvas html5.</p>
  
  <p>Almost i am near to complete my wave is moving ,but not continuously it is repeating,But i want to draw the wave is move left to right continuously?</p>
  
  <p>below link is example.</p>
  
  <p>Ex:<a href="https://www.youtube.com/watch?v=wuwBfSpVEgw" rel="nofollow">https://www.youtube.com/watch?v=wuwBfSpVEgw</a></p>
  
  <p>i am getting y data every 1 sec.</p>
  
  <p>Data Ex:</p>
  
  <pre><code>var ydata = [
                      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,
                  ];
  </code></pre>
  
  <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 = 60;
              var n = 1;
  
  
              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, ];
  
  
              drawWave();
  
              function drawWave() {
                  setTimeout(function() {
                      requestAnimationFrame(drawWave);
                      ctx.lineWidth = "2";
                      ctx.strokeStyle = 'green';
  
                      // Drawing code goes here
                      n += 1;
                      if (n &gt;= data.length) {
                          ctx.clearRect(0, 0, canvas.width, canvas.height);
                          n = 1;
                      }
                      ctx.beginPath();
                      ctx.moveTo(n - 1, data[n - 1]);
                      ctx.lineTo(n, data[n]);
                      ctx.stroke();
  
                  }, 1000 / fps);
              }
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>