Fabric.js - Rotate all object on canvas
https://groups.google.com/forum/#!topic/fabricjs/Wv5aUNju3hQ%5B1-25-false%5D
HTML
<script src="https://raw.github.com/kangax/fabric.js/feature/dynamic_origin/dist/all.min.js"></script>
<input id="angle-control" type="range" min="0" max="360" step="1" />
<br/>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1px;
border-style: solid;
border-color: #000;
}
JavaScript
var srcImg = "https://via.placeholder.com/350x350";
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";
// rectangle
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: "#dd0000"
});
rect.set("hasRotatingPoint", true);
canvas.add(rect);
// text
var text = new fabric.Text('Text', {
left: 110,
top: 110
});
text.set("hasRotatingPoint", true);
canvas.add(text);
// image
fabric.util.loadImage(srcImg, function(img) {
var object = new fabric.Image(img);
object.set({
left: 200,
top: 200
});
object.set("hasRotatingPoint", true);
object.set("scaleX", .25);
object.set("scaleY", .25);
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
/////////////////
$('#angle-control').change(function() {
var val = this.value;
canvas.forEachObject(function(obj){
obj.setAngle(val).setCoords();
});
canvas.renderAll();
});