Background image not perfect set on canvas

[yashChapaniOB]

When I set background image on the canvas, then on the right side some spacing is added. May be it does not bind full image on the
canvas. In below image, i see minor spacing issue from the right side. Can you tell me what is missing from my side?

 setBackground(option) {
        var self = this;
        if (option) {

            FabricImage.fromURL(this.props.canvasImage, { crossOrigin: 'anonymous' },option ).then((img)=>{

                const imgElement = img._originalElement as HTMLImageElement;

                // Check if the loaded background image dimensions need to be scaled
                if (img.height !== imgElement.naturalHeight) {
                    img.scaleY = img.height / imgElement.naturalHeight;
                    img.scaleX = img.width / imgElement.naturalWidth;
                    img.height = imgElement.naturalHeight;
                    img.width = imgElement.naturalWidth;
                }

                // Set the image as the background image
                self.canvas.backgroundImage = img;
                    self.canvas.renderAll();

                // Set the background color to transparent (or other canvas fill)
                self.props.canvasFill = transparentColor;
                self.canvas.backgroundColor = self.props.canvasFill;

                // Additional operations
                self.resetGradient();
                self.canvas.remove(self.getElementById('pattern'));
                self.canvas.renderAll();

                // Other updates to canvas state
                self.renderStackObjects('remove_bg');
                self.canvasModified = true;
                self._config.disableUndo = false;
                self._config.disableRedo = false;
                self.updateCanvasState();
            })
            .catch((error) => {
                console.error('Error loading background image:', error);
            });
            // Flag to indicate background image is set
            this.isBgImg = true;
        }
    }
    ```

[asturur]

                // Check if the loaded background image dimensions need to be scaled
                if (img.height !== imgElement.naturalHeight) {
                    img.scaleY = img.height / imgElement.naturalHeight;
                    img.scaleX = img.width / imgElement.naturalWidth;
                    img.height = imgElement.naturalHeight;
                    img.width = imgElement.naturalWidth;
                }

What is the scope of this code? is completely unclear.
When the image is just loaded img.height should be identical yo imgElement naturalHeight. What are you trying to catch with that code?

[yashChapaniOB]

Can you solutions me for this and provided a perfect code for load background Image on the canvas?

[asturur]

Hey @yashChapaniOB Background image not perfect set on canvas it doesn't mean anything. Is impossible to help with this quality of comunication.
What is a perfect set for an image?

[yashChapaniOB]

How to solve this problem?

[asturur]

I m sorry @yashChapaniOB with those level of comunication between us i ll stop answering.
1: explain what you want to achieve
2: show the code you wrote so far that can run somewhere in an automated way
3: there is chance someone is going to help