JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<canvas id="mycanvas" width="100" height="100">
    Your browser is not supported.
</canvas>

JavaScript

var canvas = document.getElementById("mycanvas");
var points = {};
var counter = 0;

function f(x) {
    return 50 * Math.sin(0.05 * x) + 50;
}

if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 3;
    var x = 0,
        y = f(0);
    var timeout = setInterval(function() {
        if(counter < 100) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            x += 1;
            y = f(x);
            points[x] = y;
            ctx.lineTo(x, y);
            ctx.stroke();
            if (x > 1000) {
                clearInterval(timeout);
            }
        } else {
            ctx.clearRect(0, 0, 100, 100);
            ctx.beginPath();
            points[x] = y;
            x += 1;
            y = f(x);
            for(var i = 0; i < 100; i++) {
                ctx.lineTo(i, points[i + counter - 100]);
            }
            ctx.stroke();
        }
        counter++;
    }, 10);
}