JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='can' width=300 height=300></canvas>

JavaScript

var ctx=document.getElementById('can').getContext('2d');

    srect(110,100,15,20,1);
 //srect(110,100,10,20,-1);
  


function srect(x,y,w,h,dir){
    ctx.beginPath();
    
    ctx.moveTo(x,y)
    ctx.lineTo(x-w*dir,y-h);
    ctx.lineTo(x-w*dir-w,y-h);
    ctx.lineTo(x-w,y)
    //ctx.stroke();
    ctx.fill();
/*
     ctx.moveTo(x+w+25*dir,y+h);
  ctx.lineTo(x,y);
 ctx.lineTo(x-10,y);
   ctx.lineTo(x+20,y+20); 
   
 //ctx.lineTo(x-w+25*dir*1,y+h);
//  ctx.lineTo(x-h,y);
   //ctx.lineTo(x-155*dir,y+h);
 ctx.closePath();
       
    ctx.stroke();
 //ctx.fill();*/
}