Right way to rotate things with a mouse in Fabric.

Question

This is the example:
http://jsbin.com/UHENoKi/11/

Here I use simple formula to find the angle between two points (vectors):

But as you could see at JSBin - something is broken. Where did I make a mistake?

UPDATE

Working example:
http://jsbin.com/UHENoKi/13/edit?js,output

Answer 1

The angle to rotate by is being calculated based on the 0,0 origin, but the square is rotating around its own center at 100, 100, so they don't match. If you move the square to 0,0, it feels OK:

var rect = new fabric.Rect({
  fill: '#00FFAB', 
  top: 0, 
  left: 0, 
  width: 100, 
  height: 100, 
  selectable: false
});

Rather than translating to canvas coordinates in toLocal, translate into the coordinate space of the square.