JSFiddle - React, Tailwind, and code Playground

by confile

HTML

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

<table id="table">
      <tr id="table_row">
        <td>
          <label for="tcircle">
            Circle radius</label><br />
          <input type="text" id="tcircle" class="textbox" />
        </td>
        <td>
          <label for="tsquare">
            Square size</label><br />
          <input type="text" id="tsquare" class="textbox" />
        </td>
        <td>
          <input type="hidden" id="hidden" value="34,21" onchange="valueChanged()"/>
          <br />
          <input type="button" value="Apply" id="btn" />
        </td>
      </tr>
    </table>

CSS

#canvas {
    border: 1px solid red;
}

JavaScript

var canvas;
var context;

function draw_circle(radius) {
    context.beginPath();
    context.arc(0, 0, radius, 0, 2 * Math.PI, true);
    context.closePath();
    context.stroke();
}

function draw_square(size) {
    // Angle between two consecutive vertices where the center of 
    // the repere is the center of the square.
    var angle = 0; 
    
    // distance of a vertice of the center of the square.
    var r = size / Math.SQRT2; 
    context.beginPath();
    context.moveTo(r * Math.cos(angle), r * Math.sin(angle));
    
    // angle between two consecutive vertices, which is 2*Math.PI/n. 
    // Here the regular polygon is a square. So n = 4.
    var gama = Math.PI / 2; 
 
    // Now we make a loop to draw the tree left vertices.
    for (var i = 1; i < 4; i++) {
        angle += gama;
        context.lineTo(r * Math.cos(angle), r * Math.sin(angle));
    }
    context.closePath();
    context.fillStyle = "#00ff00"; // Fill it with the green color
    context.fill();
}

function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function init() {
 
    // Initialize the canvas.
    canvas = document.getElementById("canvas");
 
    // check if the canvas is supported and also of the getContext is available.
    if (canvas && canvas.getContext) {
        // Initialize the context.
        context = canvas.getContext("2d");
        // The interval of drawing is set to 10 millisecons.
        return setInterval(draw, 10);
    }
    else {
        alert("Canvas is not supported!");
    }
}

// Angle of rotation of the square around itself.
var beta = 0; 

// angle of rotation around the circle.
var alpha = 0; 

// angle radian make by the circle in 10 milliseconds.
var theta = .01 * Math.PI;


function draw() {

    // We can pass parameters to the clear() function or just 
    // it here in order to scale when clearing.
    clear();
    var R = 30;
    var S = 20;
    alpha += theta;
    context.save();
    context.translate(canvas.width /...