HTML5 Canvas Heartbeat

gistfile1.html

<canvas id="canvas" width="150" height="150" style="background-color: black;"></canvas>
<script type="text/javascript">
                var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "#dbbd7a";
            ctx.fill();

            var fps = 10;
            var n = 1;


            var data = [
                100, 100, 100, 100, 100, 100, 100, 95, 90, 82, 90, 100, 110, 120, 100, 80, 70, 65, 70, 80, 110, 130, 135, 130, 100, 100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100, 100, 95, 90, 82, 90, 100, 110, 120, 100, 80, 70, 65, 70, 80, 110, 130, 135, 130, 100, 100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100, 100, 95, 90, 82, 90, 100, 110, 120, 100, 80, 70, 65, 70, 80, 110, 130, 135, 130, 100, 100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100, 100, 95, 90, 82, 90, 100, 110, 120, 100, 80, 70, 65, 70, 80, 110, 130, 135, 130, 100, 100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100, 100, 95, 90, 82, 90, 100, 110, 120, 100, 80, 70, 65, 70, 80, 110, 130, 135, 130, 100, 100, 100, 100, 100, 100,
 ];


            drawWave();

            function drawWave() {
                setTimeout(function() {
                    requestAnimationFrame(drawWave);
                    ctx.lineWidth = "2";
                    ctx.strokeStyle = 'red';

                    // Drawing code goes here
                    n += 1;
                    if (n >= data.length*1) {
                        n = 1;
                    }
                    ctx.beginPath();
                    ctx.moveTo(n - 1, data[n - 1]);
                    ctx.lineTo(n, data[n]);
                    ctx.stroke();

                    ctx.clearRect(n+1, 0, 1, canvas.height);

                }, 500 / fps);
            }

</script>