JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500" id = 'canvas'></canvas>

CSS

#canvas{
    
 border: solid gray 1px;   
    
}

JavaScript

var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext("2d");
      
      
  
       myDrawings();      
 
      
      
    /*    
      
      function myDrawings(){
      //Draw a black box
      ctx.fillStyle='black';
      ctx.fillRect(150,200,30,30);    
      ctx.fillRect(300,200,30,30);    
      //Draw a straight line from (200,350) to (350,380)
        ctx.beginPath();
        ctx.moveTo(200,350);
        ctx.lineTo(350,380);
        ctx.lineWidth = 1.0;
        ctx.strokeStyle = "blue";
        ctx.stroke();

      //Draw a circle at (250,250) of radius 200
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "limegreen";
        ctx.arc(250,250,200,0,Math.PI*2,true);
        ctx.stroke();
          
      //Draw a quarter circle of radius 100 centered at 300,50
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(14,50,180)";
        ctx.arc(300,50,100,0,Math.PI*1/2,false); //
        ctx.stroke();  
          
     //Draw a three-quarter circle of radius 50 centered at 70,100
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(14,50,180)";
        ctx.arc(70,100,50,0,Math.PI*1/2,true); //
        ctx.stroke();  
          
      //Draw a filled path
        ctx.beginPath();
        var startX = 250;
        var startY = 250;
        ctx.moveTo(startX,startY);
        ctx.lineTo(startX+10,startY + 50);
        ctx.lineTo(startX-20,startY+80);
        ctx.lineTo(startX-30,startY - 20);
        ctx.closePath();
        ctx.lineWidth = 2.0;
        ctx.strokeStyle = "red";
        ctx.fillStyle = "black";
        ctx.stroke(); 
        ctx.fill();
          
          
      }
      
      */
      
      function myDrawings(){
          
       ctx.fillStyle = "rgb(187,199,45)";
        
        ctx.fillRect(108, 169, 285, 164);
        ctx.beginPath();
        ctx.moveTo(108, 333);
        ctx.lineTo(203, 333);
        ctx.lineTo(108,...