JSFiddle - React, Tailwind, and code Playground

by will

HTML

<canvas id="stage" width="600" height="400">

SCSS

.canvas-container {
    display: block;
    border: solid 1px red;
}

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('stage');

canvas.selection = false;

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 40,
  height: 20,
    hasControls: false,
    hasBorders: false,
    selectable: false
});

// "add" rectangle onto canvas
canvas.add(rect);

fabric.Image.fromURL('http://engageinteractive.co.uk/assets/beer/img/engage-dark.svg', function(oImg) {
  canvas.add(oImg);
    
});