Fabric.js Rotate object programmatically around center

by Vijay Gujar

HTML

<script src="https://rawgit.com/kangax/fabric.js/1.x/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<div>
    <button id="rotate-left">Rotate left</button>
    <button id="rotate-right">Rotate right</button>
</div>
<div id="log" class="log">

</div>

CSS

canvas {
    border: 1px solid #999;
}
.log {
  height: 220px;
  overflow: auto;
  border: 1px solid #999;
  padding: 5px;
  margin-top: 10px;
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');

canvas.add(new fabric.Rect({
    width: 100,
    height: 200,
    left: 0,
    top: 0,
    angle: 0,
    fill: '#00AC6B'
}));

function rotateObject(angleOffset) {
    var obj = canvas.getActiveObject();

    if (!obj) return;

    var angle = obj.getAngle() + angleOffset;

    angle = angle > 360 ? 90 : angle < 0 ? 270 : angle;

    obj.setAngle(angle).setCoords();

    canvas.renderAll();
    
    //document.getElementById('log').innerHTML += 'Left: ' + obj.left + ', top: ' + obj.top + '<br>';
    var point = obj.getPointByOrigin("left", "top");
    //document.getElementById('log').innerHTML += 'Left: ' + point.x + ', top: ' + point.y + '<br>';
}

fabric.util.addListener(document.getElementById('rotate-left'), 'click', function () {
    rotateObject(-90);
});
fabric.util.addListener(document.getElementById('rotate-right'), 'click', function () {
    rotateObject(90);
});