JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0/fabric.min.js"></script>
<canvas id='can'></canvas>

JavaScript

var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';

var img = new fabric.Image('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', {
     left: 1,
     top: 1,
     lockMovementX: true,
     lockMovementY: true,
     selectable: false,
     hasBorders: false
});
canvas.add(img);

fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', function(myImg) {
 canvas.add(myImg);
 canvas.sendToBack(myImg)
});


[{"x":52,"y":283},{"x":52,"y":283},{"x":342,"y":283},{"x":342,"y":283},{"x":342,"y":183},{"x":152,"y":183}]

var polygon = new fabric.Polygon([ 
        { x: 52, y: 283 }, 
        { x: 52, y: 283 }, 
        { x: 342, y: 283}, 
        { x: 342, y: 283}, 
        { x: 342, y: 183 },
        { x: 152, y: 183 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'green'
});

var polygon2 = new fabric.Polygon([ 
        { x: 102, y: 333 }, 
        { x: 102, y: 333 }, 
        { x: 392, y: 333}, 
        { x: 392, y: 333}, 
        { x: 392, y: 233 },
        { x: 202, y: 233 }], { 
        fill: 'rgba(0,0,0,0)',
        stroke: 'red'
});
canvas.add(polygon, polygon2);

canvas.renderAll();