fabric.js how to maintain image quality when used as a background and resized to the size of canvas

Question

i have a big image that has a dimensions of 1920x1080, but my current canvas has only a size of 800x600.. scaling the image to the size of the background pixelates/reduces the quality of the image. even when exporting, the image quality is still low.. how do i prevent that from happening?

var background = 'image.jpg';
    canvas.setBackgroundImage(background, canvas.renderAll.bind(canvas), {
                    width: canvas.width,
                    height: canvas.height,
                    originX: 'left',
                    originY: 'top'
                });

Answer 1

I'm not sure fabric has a way to improve this. Doing big scaling can cause these kind of quality reductions. In our app we use a library called pica that is for resizing images down with high quality.

pica repo here

pica demo here

You could use this library to scale image image down before adding it to the canvas or maybe even when the canvas resizes.

Answer 2

Alternatively you can use one of the fabricjs resize filter to get a better downscaled version of image. They are not good as pica anyway.

You can easily implement a connection between PICA and fabricjs resize, Pica takes an element in input and gives you a canvas in output that is more or less what fabricjs filters do.