centeredRotation issue

by Andrea Bogazzi

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
    <canvas id="c" width="500" height="300" style="border: 1px solid #00ffff;"></canvas>
    <div>
        <button id="Rotate">Rotate</button>
    </div>
</body>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

// https://jsfiddle.net/dugafshq/1/

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

    let rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 200,
        height: 100, 
        originX: 'left',
        originY: 'top',
        fill: 'blue'
    });

    CANVAS.add(rect);

    let button = document.getElementById("Rotate");
    button.onclick = function() {
      const originX = 0.5 + (50 / rect.width);
      const originY = 0.5 -  (25 / rect.height);
      let rotateOffset = new fabric.Point(50, -25);
      fabric.util.animate({
        startValue: rect.angle,
        endValue: rect.angle + 90,
        duration: 600,
        onChange: function(value) {
            // Change center of rect as angle changes to rotate around the target point
						const centerPoint = rect.getCenterPoint();
      			const constraint = rect.translateToOriginPoint(centerPoint, originX, originY);
            rect.angle = value;
            rect.setPositionByOrigin(
              constraint,
              originX,
              originY
            );
            CANVAS.renderAll();
        },
    });
    };