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.strokeStyle='rgb(35,91,117)';
          
      ctx.strokeRect(240,150,100,100);    
      

      //Draw a circle at (250,250) of radius 200
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(105,90,85)";
        ctx.arc(240,150,100,0,Math.PI*2,true);
        ctx.stroke();
          
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(98,143,153)";
        ctx.arc(240,250,100,0,Math.PI*2,true);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.strokeStyle= "rgb(105,90,85)";
        ctx.moveTo(240,250);
        ctx.lineTo(140,250);
        ctx.lineTo(190,250 - Math.sqrt(3) / 2 * 100);
        ctx.lineTo(240,250);
        ctx.stroke();
          
        
          

          
          
      }