JSFiddle - React, Tailwind, and code Playground

by emwdx

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(211,211,211)";    
      ctx.fillRect(1, 1, 500, 500);
      ctx.fillStyle ="rgb(186,197,64)";      
      ctx.fillRect(108, 168, 285, 165);
      
      ctx.beginPath();    
      ctx.moveTo(108, 332);
      ctx.lineTo(108, 168);
      ctx.lineTo(207, 332);    
      ctx.fillStyle="rgb(3,97,39)";
      ctx.fill();

      
      ctx.beginPath();       
      ctx.moveTo(250, 250);
      ctx.lineTo(390, 332);
      ctx.lineTo(208, 332);    
      ctx.fillStyle="rgb(154,54,19)";
      ctx.fill();
          
          ctx.beginPath();
     ctx.strokeStyle="rgb(211,211,211)";
          
     ctx.strokeRect(108, 168, 285, 165)      
      
       ctx.beginPath();
    
      }