[Bug]: Image quality degradation when setting background image in v6 compared to v5.3.0

[MAliHassanDev]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.6.4

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/sandbox/sad-elbakyan-n7x9cw

Steps To Reproduce

1. Create a Fabric.js canvas with either v5.3.0 or v6.5.1
2. Load a high-resolution image (e.g., 1920x1080 or larger)
3. Set the image as canvas background using FabricImage.fromURL() and canvas.backgroundImage
4. Set canvas dimensions to match image dimensions exactly (no scaling)
5. Compare image quality between v5.3.0 and v6.5.1

// v5.3.0 (WORKS - crisp quality)
import { fabric } from "fabric";

const canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL(imageUrl, (img) => {
canvas.setWidth(img.width);
canvas.setHeight(img.height);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: 1,
scaleY: 1,
originX: "left",
originY: "top",
});
}, { crossOrigin: "anonymous" });

// v6.6.4 (BROKEN - blurry/degraded quality)
import { Canvas, FabricImage } from "fabric";

const canvas = new Canvas('canvas');

const fabricImg = await FabricImage.fromURL(imageUrl, {
crossOrigin: "anonymous",
});

canvas.setDimensions({
width: fabricImg.width,
height: fabricImg.height,
});

fabricImg.set({
left: 0,
top: 0,
scaleX: 1,
scaleY: 1,
objectCaching: false,
});

canvas.backgroundImage = fabricImg;
canvas.renderAll();

Expected Behavior

Images set as canvas background in v6 should maintain the same crisp, high-quality rendering as v5. When canvas dimensions match image dimensions exactly (1:1 ratio, no scaling), the image should render at full resolution without any quality degradation, blurriness, or pixelation.

Actual Behavior

In version 6.6.4 1, images set as canvas background appear noticeably blurry/degraded compared to the same code running in v5.3.0. The quality loss is visible even when:

• objectCaching is set to false
• strokeWidth is set to 0
• enableRetinaScaling is disabled
• imageSmoothingEnabled is set to false
• Canvas dimensions exactly match image dimensions with no scaling (scaleX: 1, scaleY: 1)

Error Message & Stack Trace

[asturur]

In your 6.4.0 screenshot there is a 1px border that is not there in 5.3.0, you are likely shifting everything of 0.5 px creating blurriness.
Can you try to remove the grey border for a test?

[shubhIam-dev]

hello @asturur @MAliHassanDev can i start working on this issue?

[asturur]

This is not verified as a bug yet.
It seems is the setup of @MAliHassanDev that may be wrong / prone to blurryness

[MAliHassanDev]

@asturur I have updated the setup and removed the styles from canvas element and can confirm the blurriness is gone. So it's not the issue related to fabric versions. You can close this issue.
Here are the both versions:
5.3.0: https://codesandbox.io/p/devbox/fabric-6-6-4-forked-zd2gzn
6.6.4: https://codesandbox.io/p/sandbox/sad-elbakyan-n7x9cw

But when i load any image on high dpr scale devices or any device where dpr is not 1 the canvas becomes very blury. You can check this by zooming the page(this will cause the window.devicepixelRatio value to change) before loading image on either version. Is this behaviour expected or i need to account dpr value when setting canvas dimensions?