How do I control the minimum left\top\right\bottom of a rectangle

[StrawberryCake-Fish]

I have a scene where I'm zoomin an image to the center of my artboard and I'm going to overlay a rectangle, and I want the left\top\right\bottom of the rectangle to be at least the left\top\right\bottom of the image

Here's my code

export class ExpandBoard {
    public readonly canvas: fabric.Canvas;
    private readonly parentId: string;
    private img: fabric.Image | null = null;
    private rect: fabric.Rect | null = null;
    private imageScale: number = 1;
    private newWidth: number = 0;
    private newHeight: number = 0;

    constructor(canvasId: string, parentId: string) {
        this.parentId = parentId;
        this.canvas = new fabric.Canvas(canvasId, {
            fireRightClick: true,
            stopContextMenu: true
        });
        let parent = document.getElementById(this.parentId)! as HTMLDivElement
        this.canvas.setWidth(parent.clientWidth);
        this.canvas.setHeight(parent.clientHeight);
        window.addEventListener("resize", this.resize.bind(this));
    }

    public resize() {
        let parent = document.getElementById(this.parentId)! as HTMLDivElement
        BoardUtils.scaleBoard(this.canvas, parent)
    }

    public addImage(imageUrl: string, callback?: () => void) {
        this.canvas.clear()
        invoke("read_file", {path: imageUrl}).then((base64) => {
            const imageUrl = base64 as string;
            fabric.Image.fromURL(imageUrl, (img) => {
                this.img = img
                this.ratio()
                const imageWidth = this.img.width!
                const imageHeight = this.img.height!
                this.imageScale = Math.min(this.canvas.width! / (imageWidth * 2), this.canvas.height! / (imageHeight * 2));
                this.img.scale(this.imageScale);
                this.img.set({angle: 0, hasRotatingPoint: false, selectable: false,});
                this.canvas.add(this.img);
                this.img.center();
                this.img.setCoords();
                this.createRectangleSolid()
                this.canvas.renderAll()
                if (callback) {
                    callback();
                }
            });
        }).catch((error) => {
            console.error("Error loading image: ", error);
        });
    }

    private createRectangleSolid() {
        this.rect = new fabric.Rect({
            fill: 'rgba(0,0,0,0.39)',
            width: this.newWidth * this.imageScale,
            height: this.newHeight * this.imageScale,
            selectable: true,
            hasControls: true,
            hasBorders: true,
            lockMovementX: true,
            lockMovementY: true,
            lockRotation: true,
            lockScalingFlip: true,
        });
        this.rect.setControlsVisibility({
            mt: true,
            mb: true,
            ml: true,
            mr: true,
            tl: false,
            tr: false,
            bl: false,
            br: false,
            mtr: false
        });
        this.canvas.add(this.rect)
        this.rect.center();
        this.rect.setCoords();
        this.rect.bringToFront();
        this.canvas.setActiveObject(this.rect);
        this.canvas.on('mouse:down', this.activateRect.bind(this));
        this.canvas.on('object:scaling', this.rectScaling.bind(this));
    }

    private activateRect() {
        this.canvas.setActiveObject(this.rect!);
        this.canvas.renderAll();
    }

    private rectScaling(_event: fabric.IEvent<MouseEvent>) {
        if (this.rect && this.img) {
            const scaleX = this.rect.scaleX!;
            const scaleY = this.rect.scaleY!;
            const rectWidth = this.rect.width! * scaleX;
            const rectHeight = this.rect.height! * scaleY;
            const imgWidth = this.img.width! * this.imageScale;
            const imgHeight = this.img.height! * this.imageScale;
            const rectRight = this.rect.left! + rectWidth;
            const rectBottom = this.rect.top! + rectHeight;
            const imgRight = this.img.left! + imgWidth;
            const imgBottom = this.img.top! + imgHeight;
            if (this.rect.left! > this.img.left!) {
                this.rect.left = this.img.left!;
            }
            if (this.rect.top! > this.img.top!) {
                this.rect.top = this.img.top!;
            }
            if (rectRight < imgRight) {
                this.rect.scaleX = (imgRight - this.rect.left!) / this.rect.width!;
            }
            if (rectBottom < imgBottom) {
                this.rect.scaleY = (imgBottom - this.rect.top!) / this.rect.height!;
            }
            this.canvas.renderAll();
        }
    }

    private ratio() {
        const targetAspectRatio = 9 / 16;
        const originalWidth = this.img!.width!;
        const originalHeight = this.img!.height!;
        const originalAspectRatio = originalWidth / originalHeight;
        this.newWidth = originalWidth;
        this.newHeight = originalHeight;
        if (originalAspectRatio > targetAspectRatio) {
            this.newHeight = Math.round(originalWidth / targetAspectRatio);
        } else if (originalAspectRatio < targetAspectRatio) {
            this.newWidth = Math.round(originalHeight * targetAspectRatio);
        }
        console.log(this.newWidth, this.newHeight)
    }
}

I see the problem here

 if (this.rect.left! > this.img.left!) {
    this.rect.left = this.img.left!;
}
if (this.rect.top! > this.img.top!) {
    this.rect.top = this.img.top!;
}

Here is my actual situation
I found that I did right\bottom as expected, but when I did left\top there was a problem

Can someone help me, be deeply grateful