Fabric.js 5.2.1 retrieve selection info

This demo shows info about current selection (object or group) on a fabric.js canvas.

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>
<canvas id="canvas" width="400" height="300" style="border:1px dotted black"></canvas>
<br>
Select one or multiple objects. Info about the selection in shown in top-right corner.

CSS

.objProps {
   font-family: Helvetica, sans-serif;
   position: absolute;
   top: 0;
   right: 0;
   padding: 3px;
   background: rgba(255,255,255,.8);
   font-size: 12px;
   color: #000;
}

JavaScript

function showObjectProps(obj) {
   objProps.style.display = 'block';
   objProps.innerHTML = Math.round(obj.left)+','+Math.round(obj.top) + ' | ' + Math.round(obj.getScaledWidth())+'Ă—'+Math.round(obj.getScaledHeight()) + ' | ' + Math.round(obj.angle) + '&deg;';
}

const fabricCanvas = new fabric.Canvas(document.getElementById('canvas'), {});

// Add some shapes to the fabric canvas
const circle = new fabric.Circle({
   radius: 50, fill: 'green', left: 100, top: 100
});
const triangle = new fabric.Triangle({
   width: 100, height: 150, fill: 'blue', left:20, top: 50
});
const rect = new fabric.Rect({
   width: 150, height: 75, fill:'red', left: 230, top:100
});

fabricCanvas.add(circle, triangle, rect);

const objProps = document.createElement('div');
objProps.className = 'objProps';
document.querySelector('.canvas-container').append(objProps);

// Show info about selection (object or group) in info-box on canvas
fabricCanvas.on({
   'selection:created': () => {
   		const target = 
      // How to do this on Fabric 5.x (e.target no longer exists)
      showObjectProps(e.selected[0]);
   },
   'selection:updated': (e) => {
      // How to do this on Fabric 5.x (e.target no longer exists)
      showObjectProps(e.selected[0]);
   },
   'selection:cleared': (e) => {
      objProps.style.display = 'none';
   },
	 'object:moving': e => {   
   		showObjectProps(e.selected[0]);
   },
	 'object:scaling': e => {   
   		showObjectProps(e.selected[0]);
   },
	 'object:rotating': e => {   
   		showObjectProps(e.selected[0]);
   }
});