JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.5/fabric.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
<button id='btnClip' onclick="clip()" >
Rotate
</button>

JavaScript

var canvas = new fabric.Canvas('canvas');

var r1 = new fabric.Rect({
	left: 0,
  top: 0,
  width: 100,
  height: 50,
  strokeWidth: 8,
  stroke: '#ff00ff',
  fill: 'transparent'
})

var r2 = new fabric.Rect({
	left: 0,
  top: 0,
  width: 100,
  height: 50,
  strokeWidth: 8,
  stroke: '#ff00ff',
  fill: 'transparent'
})

var t1 = new fabric.Textbox('Hello World', {
    width: 100,
    height: 100,
    top: 0,
    left: 0,
    fontSize: 16,
    textAlign: 'left'
});
var t2 = new fabric.Textbox('Hello World', {
     width: 100,
    height: 100,
    top: 0,
    left: 0,
    fontSize: 16,
    textAlign: 'left'
});

var g = new fabric.Group([r1,t1],{
	left: 50,
  top: 50
})

canvas.add(g);
canvas.renderAll();