JSFiddle - React, Tailwind, and code Playground

by codert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<canvas id="test"></canvas>

JavaScript

var canvas = new fabric.Canvas('test', {
	perPixelTargetFind: true
});

var triangle = new fabric.Triangle({ left: 0, top: 0, width: 30, height: 30, fill: 'yellow' }),
	circle = new fabric.Circle({ radius: 30, top: 0, left: 30, fill: 'blue' }),
  circle2 = new fabric.Circle({ rx: 10, ry: 20, top: 40, left: 0, fill: 'red' }),
  circle3 = new fabric.Circle({ scaleX: 2, scaleY: 2, radius: 10, top: 120, left: -20, fill: 'purple' }),
  rect = new fabric.Rect({ width: 100, height: 80, top: 50, left: 60, fill: 'green' }),
	group1 = new fabric.Group([triangle, circle, circle2], { subTargetCheck: true }),
  group2 = new fabric.Group([group1, circle3, rect], { subTargetCheck: true }),
  group3 = new fabric.Group([group2], { subTargetCheck: true });

canvas.add(group3);