Image Becomes Blurry When Resized Using Corner Scaling in Fabric.js 6.4.2 with Angular.

[Arkit-Sutariya]

I am working on an Angular project and using Fabric.js version 6.4.2. I am adding an image from our server to the Fabric.js canvas. The image displays perfectly and looks clean initially. However, when I resize the image using the corner scaling controls to make it smaller, it becomes blurry, and the borders exhibit a zig-zag visual effect.

I have created a minimal reproducible example on CodeSandbox, which you can access here.

Question:
1. Is this issue related to Fabric.js's image rendering or scaling functionality?
2. Could this be due to the quality of the server image itself?
3. What are the best practices or recommended settings in Fabric.js to avoid such issues during scaling?

I would appreciate guidance on whether this is a Fabric.js-specific issue or something related to the source image, along with suggestions to resolve the problem.

Thank you!

Here is default load image.

After size from corner

[asturur]

Canvas uses nearest neighbour scaling for images and when a strong scaling factor is applied it looks like that.
If you need to make images very small you can look at using filters or the resizeFilter property that allows you to use our internal Resize filter.

Try to look at this demo for example
https://fabricjs.com/demos/lanczos-webgl/

(ooofff is currently broken going to fix the demo shortly)

[asturur]

https://fabricjs.com/demos/lanczos-webgl/

I think i fixed the demo

[asturur]

Maybe the demo needs to also speak specifically of your issue

[Arkit-Sutariya]

i have seen that, understanding what you are doing wrong with cors isn't easy. FabricJS does support cors.

Thank you,
If you got any solution please share with me.

[Arkit-Sutariya]

https://fabricjs.com/demos/lanczos-webgl/

I think i fixed the demo

I have found the solution.

[vaynevayne]

transform  [0.17609841827768014, 0, 0, 0.17609841827768014, 0, 142.2884007029877]
When the zoom factor is small, the rectangle will blur