Group rotate

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<canvas id="my-canvas"></canvas>
<input id="rotate" type="range" step="1" min="0" max="360" value="0">

CSS

button {
	border: 0 none;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	color: #333;
	box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
	text-transform: uppercase;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	margin: 10px auto;
	outline: 0 none;
}

JavaScript

var el = document.getElementById('my-canvas');
var rotate = document.getElementById('rotate');

// Init the canvas
var canvas = new fabric.Canvas(el, {
	backgroundColor: '#FFFFFF',
	enableRetinaScaling: true,
	preserveObjectStacking: true,
	controlsAboveOverlay: false,
	selectionCompatibility: true,
	stopContextMenu: true,
	fireRightClick: true,
	width: 600,
	height: 600
})
canvas.renderAll()

// Adds a rectangle
const rect = new fabric.Rect({
	left: 100,
	top: 100,
	originX: 'center',
	originY: 'center',
	width: 100,
	height: 100,
	fill: 'rgba(255,255,255, 1)',
	perPixelTargetFind: false,
	strokeWidth: 1,
	strokeDashArray: [0,0],
	objType: 'shape',
	stroke: 'rgba(17,17,17,1)'
})
canvas.add(rect)

// Adds a triangle
const triangle = new fabric.Triangle({
	left: 200,
	top: 200,
	originX: 'center',
	originY: 'center',
	itemTitle: 'Triangle shape layer',
	width: 100,
	height: 100,
	fill: 'rgba(255,255,255, 1)',
	perPixelTargetFind: false,
	strokeWidth: 1,
	strokeDashArray: [0,0],
	objType: 'shape',
	stroke: 'rgba(17,17,17,1)'
})
canvas.add(triangle)

// Rotate event
rotate.addEventListener('input', function(e){
	debugger;
	if ( canvas.getActiveObject() ) { // If it's a single object
		canvas.getActiveObject().set({
			angle: e.target.value
		})
		canvas.renderAll()
	} else if ( canvas.getActiveGroup() ) { // If it's multiple objects (group)
		canvas.getActiveGroup().set({
			angle: e.target.value
		})
		canvas.renderAll()
	}

})