JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">

    </style>

  </head>
  <body>
      <canvas id="cnv"></canvas>
      <script type="text/javascript" charset="utf-8">
        cnv = document.getElementById("cnv");
        cnv.width = 1000;
        cnv.height = 1000;
        ctx = cnv.getContext("2d");

        circle = {x : cnv.width/2, y: cnv.height/2, r : 400, lw : 75};
        box = {x : 0, y: 0, w : cnv.width, h : cnv.height};

        //draw background
        //ctx.fillStyle="rgba(0,0,255,1)";
      //  ctx.fillRect(box.x,box.y,box.w,box.h);

        //draw axes
      //  ctx.strokeStyle="rgba(0,0,0,1)";
       // ctx.lineWidth=10;
        ctx.beginPath();
        ctx.moveTo(0,cnv.height/2);
      //  ctx.lineTo(cnv.width,cnv.height/2);
        ctx.moveTo(cnv.width/2,0);
      //  ctx.lineTo(cnv.width/2,cnv.height);
        ctx.closePath();
      //  ctx.stroke();

        var charHeight=50;

        //draw arcs
        var arcs=6;
        var a0=2*Math.PI/arcs*0.05
        //ctx.strokeStyle="rgba(255,0,0,1)";
      
        //overlaying circle
       // ctx.strokeStyle="rgba(0,0,0,1)";
        ctx.beginPath();
       // ctx.lineWidth=10;
     //   ctx.arc(circle.x , circle.y , circle.r , 0 ,2*Math.PI , false);
       // ctx.stroke();
        
        /*
        ctx.fillStyle="rgba(255,255,255,1)";
        var charHeight=50;
        ctx.font = "bold "+charHeight+"px sans-serif";
        text = "JOHNNYBRAVO";
        ctx.textBaseline="middle";
        var a=0;
        for (i = 0; i < text.length; i++) {
            ctx.translate(circle.x,circle.y);
            ctx.rotate(a);
            var charWidth=ctx.measureText(text[i]).width;
            var x=-charWidth/2;
            var y=-circle.r;


            ctx.fillText(text[i], x, y);
            
            //draw boundaries
            ctx.strokeStyle="rgba(255,255,0,1)";
            ctx.lineWidth=2;

     ...

CSS

body *{
      background-color: white!important;
    color: black!important;
}