JSFiddle - React, Tailwind, and code Playground
HTML
<title>Title of the document</title>
<script>
function My(canvas, opts){
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.opts = opts || {};
this.opts.pSize = this.opts.pSize || 3;
}
My.prototype.P = function(x,y,color){
var ctx = this.ctx;
var a = this.opts.pSize;
ctx.strokeStyle = color||'black';
ctx.beginPath();
ctx.moveTo(x-a,y-a);
ctx.lineTo(x+a, y+a);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x-a, y+a);
ctx.lineTo(x+a, y-a);
ctx.closePath();
ctx.stroke();
}
My.prototype.L = function(x,y,x2,y2,color){
var ctx = this.ctx;
ctx.strokeStyle = color||'black';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.stroke();
}
My.prototype.C = function(x,y,R,color){
var ctx = this.ctx;
ctx.strokeStyle = color||'black';
ctx.beginPath();
ctx.arc(x,y,R,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
}
My.prototype.clear = function(){
var ctx = this.ctx;
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
ctx.restore();
}
</script>
<body>
<canvas width=800 height=800></canvas>
<form method="" action="#">
R <input type="text" value="200" name="R"/><br/>
L <input type="text" value="400" name="L"/><br/>
C <input type="text" value="150" name="C"/><br/>
<input type="submit" value="refresh"/>
</form>
<script>
function solve(R,L,C){
//http://stackoverflow.com/questions/27176423/function-to-solve-cubic-equation-analytically
function cuberoot(x) {
var y = Math.pow(Math.abs(x), 1/3);
return x < 0 ? -y : y;
}
function solveCubic(a, b, c, d) {
if (Math.abs(a) < 1e-8) { // Quadratic case, ax^2+bx+c=0
a = b; b = c; c = d;
if (Math.abs(a) < 1e-8) { // Linear case, ax+b=0
a = b; b = c;
if (Math.abs(a) < 1e-8) // Degenerate case
return...
CSS
canvas{
background:#eeeeee;
}