JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
changeFont<input id="changeFont" type="checkbox" />
<canvas id="c" width="700" height="300"></canvas>
<span>
  Target:
</span>
<span id="target">
</span>

JavaScript

const canvas = new fabric.Canvas('c');

canvas.setZoom(2);

var g = new fabric.Group();
g.add(new fabric.Rect({
  width: 100,
  height: 200,
  left: 20,
  top: 20,
  fill: 'red'
}));
g.add(new fabric.Textbox('Hello', {
    width: 100,
    height: 100,
    top: 0,
    left: 120,
    fontSize: 50,
    textAlign: 'left'
}));
g.set({
  subTargetCheck: true
})
g.addWithUpdate();
canvas.add(g);

canvas.on('mouse:move', e => {
  target.innerText = e.subTargets[0] ?
    e.subTargets[0].type :
    null
})

document.getElementById('changeFont').onclick = function() {
	g._objects[0].set('fill','#00ffff');
  g._objects[1].set('fontFamily','helvetica');
  canvas.renderAll();
};

canvas.renderAll();