JSFiddle - React, Tailwind, and code Playground

by Taylor Lopez

HTML

<canvas id="graph"></canvas><br />
<i>f(x)</i>= <input id="funcIn" /><br />
<button id="go">Graph</button>

CSS

#graph { border: solid 1px black; }

JavaScript

var graph, ctx;

function main()
{
	graph = $("#graph")[0];
  graph.width = 100;
  graph.height = 100;
  $(graph).css("width", graph.width + "px");
  $(graph).css("height", graph.height + "px");
  ctx = graph.getContext('2d');
  
  var g = new Graph();
  var funcs = [
  	//*
    {
    	color: "#0000ff",
      func: function(x){ return 5*x*x*x - 7*x*x + 2*x }
    },//*/
    //*
    {
    	color: "#ff0000",
      func: function(x){ return x*x; }
    },//*/
    /*
    {
    	color: "#009900",
      func: function(x){ return (1 + Math.sin((Math.pi/2)*Math.pow(544 * x + 81,0.25)))/2; }
    },//*/
  ];
  g.drawGraph(ctx, funcs);
}

function Graph()
{
  var minX = -5;
  var maxX = 5;
  var minY = -5;
  var maxY = 5;
  var originX = ((0 - minX)/(maxX - minX)) * ctx.canvas.width;
  var originY = ((0 - maxY)/(minY - maxY)) * ctx.canvas.height; // flipped max and min in equation to account for y direction flip between pixels standard y plotting
  var tickWidth = 5;
  var tickHeight = 5;
  
  this.drawGraph = function(ctx, funcs)
  {
  	clearGraph(ctx);
  	drawAxes(ctx);
    
    for (var i = 0; i < funcs.length; i++)
    {
    	var cur = funcs[i];
      ctx.strokeStyle = cur.color;
      ctx.beginPath();
      ctx.moveTo(pxConv(-1), pxConv(yCoordToPx(ctx, cur.func(xPxToCoord(ctx, -1)))));
      for (var x = 0; x <= ctx.canvas.width; x++)
      {
        ctx.lineTo(pxConv(x), pxConv(yCoordToPx(ctx, cur.func(xPxToCoord(ctx, x)))));
      }
      ctx.stroke();
    }
  }
  
  function clearGraph(ctx)
  {
  	ctx.clearRect(0, 0, ctx.width, ctx.height);
  }
  
  function drawAxes(ctx)
  {
    ctx.strokeStyle = "#ccc"
    ctx.beginPath();
    ctx.moveTo(pxConv(-1), pxConv(originY));
    ctx.lineTo(pxConv(ctx.canvas.width + 1), pxConv(originY));
    ctx.moveTo(pxConv(originX), pxConv(-1));
    ctx.lineTo(pxConv(originX), pxConv(ctx.canvas.height + 1));

    for (var x = minX; x < maxX; x++)
    {
      if (x == 0) continue;
      var startX = xCoordToPx(ctx, x);
      var startY =...