JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

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

CSS

html, body {
  padding: 0;
  margin: 0;
}

JavaScript

const canvas = new fabric.Canvas(document.getElementById('canvas'), {
	backgroundColor: 'white',
	width: 800,
  height: 800,
  enableRetinaScaling: true,
});

const image1 = new fabric.Image.fromURL('https://images.unsplash.com/photo-1606787619248-f301830a5a57?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80', img => {
	canvas.add(img);
}, {scaleX: 0.25, scaleY: 0.25, left: 150, top: 150});

const image2 = new fabric.Image.fromURL('https://images.unsplash.com/photo-1560081223-734e568800b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80', img => {
	canvas.add(img);
}, {scaleX: 0.25, scaleY: 0.25, left: 250, top: 200});

const button = document.getElementById('button');

button.onclick = function() {
	const activeObj = canvas.getActiveObject();
  
  if (activeObj && activeObj.type === 'activeSelection') {
  	activeObj.toGroup();
    canvas.requestRenderAll();
  }
}