JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/math.min.js"></script>
<canvas id="myCanvas" style='background-color: rgba(20,20,20,0.015)'></canvas>
<br />
<input class='a' type="text" value="1000">
<input class='c' type="text" value="50">
<p></p>
<p class='a'></p>

JavaScript

$('input')
    .keyup(function () {
    var value = $('.a').val();
    var xa = $('.c').val();
    xf = math.eval(xa);
    $('.a').html(' ');
    $('.a').append(value);
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = 400;
    context.beginPath();
    for (x = 0; x < value; x++) {
        var a = 2;
        context.lineTo(x, 1 * canvas.height - xf);
    }
    context.lineStyle = 'black';
    context.lineWidth = 1;
    context.stroke();
})
    .keyup();