JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/math.min.js"></script>
<input class='c' type="text" value="f(x) = 0.5x" />
<input class='x' type="text" value="1" />
<input class='y' type="text" value="1" />
<canvas id="myCanvas" style='background-color: rgba(20,20,20,0.015)'></canvas>
<br />
<div id='height'></div>

CSS

#height {
    height: 200vh;
}
#myCanvas {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}
input {
    position: fixed;
    background-color: White;
    z-index: 100 !important; 
    right: 20px;
    border: none;
    outline: none;
}
.c {
    top: 20px;
}
.x {
    top: 40px;
}
.y {
    top: 60px;
}

JavaScript

xvalue = 10;
yvalue = 1;
width = window.innerWidth;
height = 300;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
canvas.width = width;
canvas.height = height;

$('*').on('keypress hover mousemove', function (e) {
    $('input')
        .keyup(function () {
        canvas.width = width;
        canvas.height = height;
        var yvalue = $('.y').val();
        var xvalue = $('.x').val();
        var xa = $('.c').val();
        xf = math.eval(xa);
        context.textAlign = 'center';
        context.font = '12pt Helvetica';
        context.fillStyle = 'black';
        context.fillText(Math.round(xf(width * xvalue)), canvas.width * 0.92, height - 10);
        context.fillText(Math.round(xf(width * 0.5 * xvalue)), canvas.width * 0.50, height - 10);
        context.fillText(Math.round(xf(width * 0 * xvalue)), canvas.width * 0.08, height - 10);
        for (x = 0; x < width * xvalue; x++) {
            context.lineTo(x * (1 / xvalue), 1 * canvas.height - xf(yvalue * x));
        }
    })
        .keyup();
    context.lineStyle = 'black';
    context.lineWidth = 1;
    context.stroke();
});