JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var canvas = document.getElementById("mycanvas");

var points = {};
var counter = 0;

function f(x, b, c) {
    return 120 * Math.sin(x/33 + b) + c;
}

function drawFunction(canvas, func, b, c, lineWidth, strokeStyle, shadowColor, shadowBlur) {
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeStyle;
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    var x = 0,
        y = f(0);
    var timeout = setInterval(function() {
            ctx.beginPath();
            ctx.moveTo(x, y);
            x += 1;
            y = func(x, b, c);
            points[x] = y;
            ctx.lineTo(x, y);
            ctx.stroke();
            if (x > 1000) {
                clearInterval(timeout);
            }
    }, 19);
}

drawFunction(canvas, f, -56, 120, 3, '#F00', '#F00', 20);
drawFunction(canvas, f, 150, 120, 3, '#EAEF00', '#EAEF00', 2);