JSFiddle - React, Tailwind, and code Playground

by varun_1995

HTML

<canvas id="c1" width="600" height="600" style="border:1px solid black;"></canvas>

JavaScript

var canvas = new fabric.Canvas('c1');
var src ="http://fabricjs.com/assets/pug_small.jpg";
var object;
fabric.util.loadImage(src, function (img) {
    object = new fabric.Image(img);
    object.set({
        left: 20,
        top: 20,
        width:300,
        height:400,
        selectable: false
    });
    
     
var rect = new fabric.Rect({
  top: 100,
  left: 100,
  fill: 'transparent',
  stroke: 'black',
  width: 150,
  height: 100
});

var group = new fabric.Group([ object, rect ], {
 left: 100,
 top: 50,
});
canvas.add(group);
 });