How can I draw a right triangle with fabric js?

Question

function normalTriangle() {
    return new fabric.Triangle({
        transparentCorners: false,
        objectCaching: false,
        shapeType: 'normalTriangle'
    })
}

canvas = new fabric.Canvas(canvasElement, {
            selection: true
            preserveObjectStacking: true,
            renderOnAddRemove: false, 
            uniformScaling: false
        }).setWidth(basicWidth).setHeight(basicHeight);

        canvas.on({
            'mouse:over': CanvasMouseOver,
            'mouse:down:before': CanvasMouseDownBefore,
            'mouse:down': CanvasMouseDown,
            'mouse:move': CanvasMouseMove,
            'mouse:up:before': CanvasMouseUpBefore,
            'mouse:up': CanvasMouseUp,
            'mouse:dblclick': CanvasDoubleClick,
            'object:scaling': CanvasObjectScaling,
            'selection:created': CanvasSelectionCreated,
            'selection:cleared': CanvasSelectionCleared
        });



function CanvasMouseOver(evt) {
    if (shapeType || lineType) {
        canvas.defaultCursor = 'crosshair';
    }
}

function CanvasMouseDownBefore(evt) {
    if (shapeType || lineType) {
        canvas.selection = false;
    }
}

function CanvasMouseDown(evt) {
    canvasDown = true;

    let pointer = canvas.getPointer(evt.e);
    if (shapeType || lineType) {
        drawingStartX = pointer.x;
        drawingStartY = pointer.y;

        drawingObj = DrawingCombination(shapeType, lineType);

        if (!drawingObj) return;

        drawingObj.left = drawingStartX;
        drawingObj.top = drawingStartY;
        drawingObj.width = pointer.x - drawingStartX;
        drawingObj.height = pointer.y - drawingStartY;

        canvas.add(drawingObj);
    }
}

function CanvasMouseMove(evt) {
    if ((shapeType || lineType) && canvasDown && !canvas.getActiveObject()) {
        let pointer = canvas.getPointer(evt.e);

        if (!drawingObj) return;

        if (drawingStartX > pointer.x) {
            drawingObj.set({
                left: Math.abs(pointer.x)
            });
        }
        if (drawingStartY > pointer.y) {
            drawingObj.set({
                top: Math.abs(pointer.y)
            });
        }

        drawingObj.set({
            width: Math.abs(drawingStartX - pointer.x)
        });
        drawingObj.set({
            height: Math.abs(drawingStartY - pointer.y)
        });

        canvas.renderAll();
    }
}

function CanvasMouseUpBefore(evt) {
    if ((shapeType || lineType) && canvasDown) {

        if (!drawingObj) return;

        if (drawingObj.width == 0 && drawingObj.height == 0) {
            canvas.remove(drawingObj);
        } else {
            drawingObj.setCoords();
        }

        drawingObj = null;
        drawingStartX = null;
        drawingStartY = null;
    }
}

function CanvasMouseUp(evt) {
    canvasDown = false;
}

I would like to draw a right triangle using the triangle of fabric js. Is there a way?

I use canvas using drag function.

Among the figures that can be resized using a drag from the starting point of the mouse click, want a right triangle with 90 degrees.

function rightTriangle() {
    return new fabric.Polygon([{x:0,y:100}, {x:100, y:0}, {x:0, y:0}],{
        fill: document.querySelector('.SelectionFillColor').value,
        stroke: document.querySelector('.SelectionStrokeColor').value,
        transparentCorners: true,
        objectCaching: false,
        shapeType: 'rightTriangle',
    })
}

I tried using polygons, but there was a problem that the shape and the outside size did not match.

Answer 1

override fabric.Rect.

I used "Polygon" to draw the shape and adjust the "Scale" to change the size There was a problem with "Bounding Box" leaving, so I couldn't solve it by myself.

In the end, we borrowed the Override presented in the link above and proceeded.

However, this method does not cause a reversal of the shape at the start point when the first drag attempt is made.