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(){

          
        ctx.fillStyle = "rgb(187,200,45)";
        
        ctx.fillRect(108, 172, 285, 164);
          
        ctx.beginPath();
        ctx.moveTo(110, 335);
        ctx.lineTo(203, 335);
        ctx.lineTo(108, 170);
        ctx.fill();
        
        ctx.fillStyle = "rgb(22,68,16)";
        ctx.fill();
          
        ctx.beginPath();
        ctx.moveTo(394, 336);
        ctx.lineTo(200, 335);
        ctx.lineTo(250, 250);
        ctx.fill();
        
        ctx.fillStyle = "rgb(153,51,8)";
        ctx.fill(); 
      }