How to animate rotate around center in fabric js

Question

When you use one of the handle bars to rotate an object in fabricjs it will rotate the object around center. However, when using

tri.animate('angle', 45, {
  onChange: canvas.renderAll.bind(canvas)
});

It will rotate around the top-left corner. How to rotate around center just like with the handle bar?

Example: http://jsfiddle.net/QQ6eA/1/

Answer 1

Add:

originX: 'center',
originY: 'center',

to your triangle creation code.

Answer 2

If you rotate an image with his default origin, this will do it around top left corner. We don't want to set the origin of the image on the center all the time, because it will affect all the functionalities (for example, its left and top positions). So, we can set the origin to center when we need it and then set it again to the top-left corner and still use all the others functionalities normally.

const target = canvas.getActiveObject(); //or your target
const angleValue = 10; //your angle
target._setOriginToCenter();
target.set('angle', angleValue).setCoords();
target._resetOrigin();