JSFiddle - React, Tailwind, and code Playground

by ryanwfiorini

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas: background-color:red;

JavaScript

function DrawSpiro() {
    debugger;
       var objCanvas = document.getElementById("canvas");
       var ctx = objCanvas.getContext("2d");
       ctx.save();
 
       var size = 0;
       if(objCanvas.width<objCanvas.height)
            size = objCanvas.width;
       else
            size = objCanvas.height;
       ctx.translate(size/2,size/2);
       
       var OuterRadius = document.SpiroInput.OuterRadius.value;
       var InnerRadius = document.SpiroInput.InnerRadius.value;
       var PenOffset = document.SpiroInput.PenOffset.value*InnerRadius/100;
       var PenColour;         // for later extension
       var PenThickness;      // for later extension
       var StartX;                  // we start drawing here
       var StartY;                  // we start drawing here
       var x,y;
       var Step = Math.PI/180;
       var Angle = 0;
       
       StartX = (OuterRadius-InnerRadius)*Math.cos((InnerRadius / OuterRadius)*Angle)+PenOffset*Math.cos((1 - (InnerRadius / OuterRadius))*Angle);
       StartY = (OuterRadius-InnerRadius)*Math.sin((InnerRadius / OuterRadius)*Angle)-PenOffset*Math.sin((1 - (InnerRadius / OuterRadius))*Angle);

       ctx.beginPath();
       ctx.moveTo(StartX,StartY);
       do
       {
            Angle += Step;
            x = (OuterRadius-InnerRadius)*Math.cos((InnerRadius / OuterRadius)*Angle)+PenOffset*Math.cos((1 - (InnerRadius / OuterRadius))*Angle);
            y = (OuterRadius-InnerRadius)*Math.sin((InnerRadius / OuterRadius)*Angle)-PenOffset*Math.sin((1 - (InnerRadius / OuterRadius))*Angle);
            ctx.lineTo(x,y);
            ctx.stroke();
       } while ((x != StartX) && (y != StartY));

       ctx.restore();
    }
    
    function clearCanvas(){
       var canvas = document.getElementById("canvas");
       var context = canvas.getContext("2d");
       context.clearRect(0, 0, canvas.width, canvas.height);
    }
 
    function OuterP10(){
       document.SpiroInput.OuterRadius.value =...