Truly Rotate Center Of Equilateral Triangle In Fabric.js

Using Fabric.js, I'm having trouble truly rotating a triangle around its center point, or at least what I believe should be the center point. I created a jsFiddle that demonstrates

Solution 1:

fabric.js calculates the centre point of a shape by translating a point in the top left corner to the centre of the bounding box of the shape. The centre of the bounding box is not the centre of the triangle.

For an isosceles triangle (where 2 sides are the same length) with its base at the bottom - which I believe is the default for fabric.js - the centre point of the triangle is located at one third the height of the triangle.

You can use the method described here to find a new top-left corner (the x and y values) for the shape by rotating the original top-left about the centre of the triangle.

function createTriangle(x, y, angle)
{
    var width = 350;
    var height = 300;
    var pos = fabric.util.rotatePoint(
        new fabric.Point(x, y),
        new fabric.Point(x + width / 2, y + height / 3 * 2),
        fabric.util.degreesToRadians(angle)
    );
    return new fabric.Triangle(
    {
        width: width,
        height: height,
        selectable: false,
        fill: 'rgba(0,0,0,0)',
        stroke: 'white',
        strokeWidth: 2,
        left: pos.x,
        top: pos.y,
        angle: angle
    });
}

You will need a recent version of fabric.js for this to work.