JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script type="application/javascript"> 
var shapeName = new Object();
shapeName = {sWidth: 50, sHeight: 50, nShapes: 3, bSpacing: 10, canvasName: "canvas1"};
 
var testNum1 = shapeName.sWidth;
 
function init(){
    document.getElementById("canvas1").addEventListener("mousemove", draw, false);
    setInterval(draw, 500);
}
 
function createCanvas(canName){
    var canvas = document.getElementById(canName);
 
    return canvas;
}
 
function drawCircle(ctx, i){
    var cWidth = winWidth();
    var cHeight = winHeight();
    ctx.fillRect ((cWidth / 2) - (shapeName.sWidth / 2) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes) / 2 + (shapeName.bSpacing + shapeName.sWidth) * i, (cHeight / 2) - (shapeName.sHeight / 2), shapeName.sWidth, shapeName.sHeight);
}
 
function drawCircleTest(ctx, i){
    var cWidth = winWidth();
    var cHeight = winHeight();
    ctx.fillRect ((cWidth / 2) - (shapeName.sWidth / 2) - (shapeName.sWidth * shapeName.nShapes + shapeName.bSpacing * shapeName.nShapes) / 2 + (shapeName.bSpacing + shapeName.sWidth) * i + testNum1, (cHeight / 2) - (shapeName.sHeight / 2), shapeName.sWidth, shapeName.sHeight);
}
 
function winWidth(){
    return document.getElementById(shapeName.canvasName).offsetWidth;
}
 
function winHeight(){
    return document.getElementById(shapeName.canvasName).offsetHeight;
}
 
function draw(e){
    var canvas = createCanvas(shapeName.canvasName);
    var ctx = canvas.getContext("2d");
 
    ctx.clearRect(0,0,400,200); // clear canvas
    var randOp = Math.round(Math.random() * 100) / 100;
 
    ctx.fillText("Console: " + e.clientX + ", " + e.clientY + ", " + testNum1, 150, 20);
 
    for(var i = 0; i <= shapeName.nShapes; i++){
        ctx.fillStyle = "rgba(0, 0, 0, 1.0)";    
        //drawCircle(ctx, i);
        drawCircleTest(ctx, i);
    }
    if(testNum1 < 100){
        testNum1++;
    }
}
</script> 
</head> 
<body onload="init()"> 
    <canvas id="canvas1"...