JSFiddle - React, Tailwind, and code Playground

by mayuripatil185

HTML

<canvas id="can"></canvas>

JavaScript

var ctx=document.getElementById('can').getContext('2d');
vrect(100,100,10,9,1);
//vrect(110,50,10,15,1)

function vrect(x,y,w,h,dir)
{
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+w*dir,y+w)
    ctx.lineTo(x+w*dir,y+h+25);
    ctx.lineTo(x,y+h+25-w);
    //ctx.stroke();
   ctx.fill();
   
    ctx.beginPath();
     ctx.moveTo(x+w*dir,y+h+25);
    ctx.lineTo(x,y+h+25-w);
     ctx.lineTo(x-25,y+h+25-w);
    ctx.lineTo(x-25+h,y+h+25);
    //ctx.stroke();
    ctx.fill();
 }