Background image with filters not stretching to full width of canvas - fabric.js

Question

I am using fabric.js. I am loading a background image into canvas and the image is not streching. If i upload just the image everything is good, when i add filters to background image, the background image not stretching to full width of the canvas.

I tried to add filters after loading the image. Tried also remove background and load again, everything is going to the same place... Image not stretching.

This is a fiddle with only background image:

`https://jsfiddle.net/Music/6mcf4kj0/2/`

This is a fiddle with background image and filters:

`https://jsfiddle.net/Music/q30cfwL7/1/`

I expect the image to be full width and height of the canvas.

Answer 1

Your image is 3000x3000, which is too large for the default fabric.js settings. From the filter docs :

The picture will be painted over a tile of 2048x2048 size, bigger pictures won't fit. fabric.textureSize set at 2408 is a safe limit. Most of the hardware will support 4096 and so 4096x4096 is a limit that will probably work and give you less headaches. Take in mind that canvas has a max size too. If you are supporting browsers like IE11 you will have probably problems with canvases bigger than 5000 on a size, whatever your webgl hardware is capable of.

Try this before applying the filter:

fabric.textureSize = 4096

You can also check if Webgl is supported then apply

if (fabric.isWebglSupported()) fabric.textureSize = 65536;