Resizing textboxes without image like stretch

[lavnishhh]

I've referred to a few stackoverflow questions and a few discussions on github, but nothing has been working well so far. I'm trying to resize textboxes in a way that it does not stretch the text, and instead expand the container instead. (And increase the font size number when using corner controls)

    InteractiveFabricObject.createControls = () => {
        const controls = controlsUtils.createObjectDefaultControls();
        controls.mr.actionHandler = changeWidth;
        controls.ml.actionHandler = changeWidth;
        controls.mt.actionHandler = changeHeight;
        controls.mb.actionHandler = changeHeight;
        return {
            controls
        }
    }

}

const changeWidth = controlsUtils.wrapWithFireEvent('resizing', (eventData: TPointerEvent, transform: Transform, x: number, y: number) => {
    var target = transform.target, localPoint = controlsUtils.getLocalPoint(transform, transform.originX, transform.originY, x, y),
        strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1)
    let newWidth = Math.abs(localPoint.x / target.scaleX) * 2 - strokePadding;

    console.log(localPoint.x, target.left, target.top, x, y)

    if (transform.corner === 'ml') {
        const deltaX = target.width - newWidth;
        target.set('left', target.left + deltaX * target.scaleX);
    }
        
    target.set('width', Math.max(newWidth, 0));
    target.setCoords();
    return true;
});

const changeHeight = controlsUtils.wrapWithFireEvent('resizing', (eventData: TPointerEvent, transform: Transform, x: number, y: number) => {
    const target = transform.target;
    const strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleY : 1);
    const localPoint = controlsUtils.getLocalPoint(transform, transform.originX, transform.originY, x, y);

    const newHeight = Math.abs(localPoint.y / target.scaleY) * 2 - strokePadding;

    if (transform.corner === 'mt') {
        const deltaY = target.height - newHeight;
        target.set('top', target.top + deltaY * target.scaleY);
    }

    target.set('height', Math.max(newHeight, 0));
    target.setCoords();
    return true;
});```


The above code works- however, it causes a lot of flicker when moving it. When i add 'wrapWithAnchor', it simply switches to symmetric container increase, instead of just increasing container size from one side. What am I doing wrong?

A side question- how do i increase the font size the same way, when the corner handles are moved?