JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.js"></script>
<canvas id="c" width=300 height=300></canvas>
<span>
  area is:
</span>
<span id="result">
</span>

JavaScript

const canvas = new fabric.Canvas('c');
var rect3 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'yellow'
});
var rect4 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 100,
  top: 100,
  fill: 'purple'
});
var group3 = new fabric.Group([ rect3, rect4 ], { scaleX: 0.5, scaleY: 0.5, top: 100, left: 0 });
group3.subTargetCheck = true;

var rect1 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red'
});
var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 100,
  top: 100,
  fill: 'blue'
});
var g = new fabric.Group([ rect1, rect2, group3 ], { top: 150, left: 50 });
g.subTargetCheck = true;
canvas.viewportTransform = [0.1, 0, 0, 0.1, 100, 200];
canvas.scale() = 1;
canvas.add(g);

canvas.on('mouse:move', e => {
  result.innerText = e.subTargets[0] ?
    e.subTargets[0].fill : null
})
canvas.renderAll();