Rect Corners Positions

[interk0t]

I created two objects: Image and Rect
the task was to perform the necessary calculations based on the position of the angles (ml, mt, mr, mb) of both objects. both objects have the same height and width parameters, as well as the same top and left position.
But after displaying the location of the corners of both objects in the console, I noticed that the corners of the rectangle mr and mb are always exactly 1 pixel larger than those of the image, I tried to create an image, but the corners of the two objects image image coincided, only rect had a discrepancy
Еhis is how I created the objects:

 onMount(() => {
 
    canvas = new fabric.Canvas('canvas', {
        width: 393 * size,
        height: 852 * size
    });
    
    fabric.Image.fromURL(path.data.src, function(img) {
        
        img.set({
            scaleX: 1,
            scaleY: 1,
            evented: false,
            selectable: false,
        });
        
        canvas.add(img);
        img.center();
        
        rect = new fabric.Rect({
            width: (img.width) * img.scaleX,
            height: (img.height) * img.scaleY,
            top: img.top,
            left: img.left,
            lockScalingFlip: true,
            fill: 'transparent',
            lockRotation: true,
            borderColor: 'white',
            cornerColor: 'transparent',
            hasBorders: false,
            cornerSize: 15,
        });
        
        canvas.add(rect);
        canvas.renderAll();

        console.log( 'rect', rect.width , 'img', img.width)
        console.log( 'rect', rect.height , 'img', img.height)
        console.log( 'rect', rect.top , 'img', img.top)
        console.log( 'rect', rect.left , 'img', img.left)
        
        console.log( 'rect', rect.oCoords.ml.x , 'img', img.oCoords.ml.x)
        console.log( 'rect', rect.oCoords.mt.y , 'img', img.oCoords.mt.y)
        console.log( 'rect', rect.oCoords.mr.x , 'img', img.oCoords.mr.x)
        console.log( 'rect', rect.oCoords.mb.y , 'img', img.oCoords.mb.y)
        
    })

});

console.log:

rect top 172.99617999999998 img top 172.99617999999998
rect left 55.20774499999999 img left 55.20774499999999
rect ml 55.20774499999999 img ml 55.20774499999999
rect mt 172.99617999999998 img mt 172.99617999999998
rect mr 280.207745 img mr 279.207745
rect mb 552.99618 img mb 551.99618

As you can see in the last two lines there is a difference of 1 pixel, and you can also visually see a difference of 1 pixel even though the sizes of the objects are the same, what is this connected with and how to fix it? Thank you!

[asturur]

It is the strokeWidth that makes the bounding box larger. Images by default have it to 0, all other objects have set to 1. Set it to 0 either on the defaultValues or on the prototype or on per object basis, depending on which version of fabricJS you are working with and what you prefer.