JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas"></canvas>

CSS

canvas {
    border: 1px solid red;
}

body {
    background-color: #EEBBEE;
}

JavaScript

var canvas = new fabric.StaticCanvas('canvas');
canvas.setHeight(300);
canvas.setWidth(300);

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'rgba(0,0,0,0.0)',
    width: 100,
    height: 100,
    stroke: 'black'
    
});
var bgrect = new fabric.Rect({
    left:0,
    top:0,
    fill: 'red',
    width: 100,
    height: 300,
});
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:200,
    top:0,
    fill: 'red',
    width: 100,
    height: 300,
});
canvas.add(bgrect);
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:100,
    top:0,
    fill: 'red',
    width: 100,
    height: 100,
});
canvas.add(bgrect);
bgrect = new fabric.Rect({
    left:100,
    top:200,
    fill: 'red',
    width: 100,
    height: 100,
});
canvas.add(bgrect);
//canvas.backgroundColor = 'red';
canvas.add(rect);
canvas.renderAll();