JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script type="application/javascript"> 
var shapeName = { sWidth: 50, sHeight: 50, nShapes: 3, bSpacing: 10, canvasName: "canvas1" };
 
var testNum1 = shapeName.sWidth;
var clientX, clientY;
    
function init(){
    document.getElementById("canvas1").addEventListener("mousemove", changeCoords, false);
    setInterval(draw, 150);
}
 
function changeCoords(e){
    clientX = e.clientX;
    clientY = e.clientY;
}
    
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(){
    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: " + clientX + ", " + clientY + "", 250, 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++;
   ...