When I apply filters on canvas Image it reduce the image width about fabric.js

[asturur]

please have a look at the documentation, in particular:
http://fabricjs.com/fabric-filters
and the paragraph about webgl and texture size

[Muhammad-Shoaib-Official]

please have a look at the documentation, in particular: http://fabricjs.com/fabric-filters and the paragraph about webgl and texture size

This doesn't work for me. 
Actually, I'm not facing an issue when I apply filters; it cuts the image width to half of the canvas, but I want filters implemented smoothly without losing the image width. I tried it, but it did not work for me. Here is my code.

// intial image load
const loadImage = () => {
canvas?.clear();
fabric.Image.fromURL(src, function (img) {
img.set({ id: 'main_canvas_image', hasControls: false });
img.set({ scaleX: 1, scaleY: 1 });
img.scaleToWidth(canvas.width);

  if (img.height < canvas.height) {
    img.scaleToHeight(canvas.height);
  }

  canvas.add(img);
  canvas.renderAll();
  loadFilterPreview();
});

handleImageMoving();

};

// filters list with preview
const loadFilterPreview = () => {
const filtersList = [
new fabric.Image.filters.Vibrance({ vibrance: 1 }),
new fabric.Image.filters.Contrast({ contrast: 0.1 }),
new fabric.Image.filters.Brightness({ brightness: 0.1 }),
new fabric.Image.filters.Gamma({ gamma: [1, 2, 2] }),
new fabric.Image.filters.HueRotation({ rotation: 90 }),
new fabric.Image.filters.Brightness({ brightness: 0.5 }),
];

const updatedPreviews = [
  { label: 'Original', preview: '', filters: [] },
  {
    label: 'Studio',
    preview: '',
    filters: [filtersList[0], filtersList[1]],
  },
  { label: 'Spotlight', preview: '', filters: [filtersList[2]] },
  { label: 'Prime', preview: '', filters: [filtersList[3]] },
  { label: 'Classic', preview: '', filters: [filtersList[4]] },
  { label: 'Edge', preview: '', filters: [filtersList[5]] },
  { label: 'Luminate', preview: '', filters: [filtersList[6]] },
];

setFilterPreview(
  updatedPreviews.map(filterItem => ({
    ...filterItem,
    preview: canvas?.toDataURL?.(),
  }))
);

};

// useEffect for handle filter change
useEffect(() => {
const current = filterPreview.find(e => e.label === filter);
if (current && canvas) {
const canvasImage = canvas
?.getObjects()
?.find(e => e.id === 'main_canvas_image');

  canvasImage.filters = current.filters;
  canvasImage.applyFilters();
  canvasImage.scaleToWidth(canvas.width);
  canvas.renderAll();
}

}, [filter]);

[asturur]

Please add a working reproducible case i can't really work with snippets of code that i have to find a way to run.