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(52,119,137)";      
      ctx.strokeRect(235,120,105,105);    
      //Draw a straight line from (200,350) to (350,380)
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(0,0);
        ctx.lineWidth = 1.0;
        ctx.strokeStyle = "blue";
        ctx.stroke();
          
        
      function triangle(x,y,width){
                
      ctx.strokeStyle = "rgb(111,92,92)";
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.lineTo(x+width,y);
      ctx.lineTo(x+0.5*width, y- 0.5*Math.sqrt(3)*width)
      ctx.closePath();
      ctx.stroke();
          
      }  

       triangle(140,223,100);
        

          
      //Draw a circle at (250,250) of radius 200
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(111,92,92)";
        ctx.arc(240,125,100,0,Math.PI*2,true);
        ctx.stroke();
          
        ctx.beginPath();
        ctx.lineWidth=2.0;
        ctx.strokeStyle = "rgb(52,119,137)";
        ctx.arc(240,220,100,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(0,0,0,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(0,0,0,0,Math.PI*1/2,true); //
        ctx.stroke();  
          
      //Draw a filled path
        ctx.beginPath();
        var startX = 0;
        var startY = 0;
        ctx.moveTo(startX,startY);
        ctx.lineTo(startX+0,startY + 0);
        ctx.lineTo(startX-0,startY+0);
       ...