JSFiddle - React, Tailwind, and code Playground

by pukster

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)";
        for (var i = 0; i < arcs; i++){
            ctx.beginPath();
            ctx.lineWidth=circle.lw;
            ctx.arc(circle.x , circle.y , circle.r , a0 , a0+2*Math.PI/arcs*0.9 , false);
            ctx.stroke();

            a0+=2*Math.PI/arcs;
        }

        //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...