JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="800" height="800"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
//canvas.backgroundColor = 'blue';

var rectObject = new fabric.Rect({
  top: 200,
  left: 300,
  width: 200,
  height: 200,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(rectObject);

var heart = new fabric.Path('M 272.70141,238.71731 \
    C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731  \
    C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535 \
    C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731 \
    C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731  \
    C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481 \
    C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731  \
    z ');

heart.set({
  left: 20,
  top: 20,
  scaleX: 0.4,
  scaleY: 0.4,
  fill: '#f00',
});
canvas.add(heart);

var circleObject = new fabric.Circle({
  top: 200,
  left: 20,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(circleObject);

fabric.Image.fromURL('http://placeimg.com/640/480/any', function(fimg) {
  canvas.add(fimg.set({
    left: 0,
    top: 0,
    width: 200,
    height: 200,
    globalCompositeOperation: 'source-atop'
  }));
});