document.addEventListener("DOMContentLoaded", () => {
  
  const FABRIC            = new fabricExtend.Fabric(fabric).extend();
  const HTMLCanvasElement = document.querySelector("canvas");
  const url               = "https://raw.githubusercontent.com/nicolasmondain/fabric/master/docs/assets/img/SHOOT-0.jpg";
  const canvas            = new FABRIC.StaticCanvas(HTMLCanvasElement, {backgroundColor:  "#eaecef"});
  
  const FILTER_CUSTOM = {
    
    name   : 'custom-name',
    medias : [],
    path   : '',
    actions: [
      
      {name: 'adjustbrightness', parameters: {value1: 20}},
      {name: 'multiply', parameters: {imageData2: 'https://images.unsplash.com/photo-1692732165339-b3745d9838f4?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTU4NDc5MTN8&ixlib=rb-4.0.3&q=85'}},
      {name: 'saturation', parameters: {value1: 70}}
      
    ]
   
  };

  FABRIC.Image.fromURL(url, async(image) => {

    const conf = FABRIC.extended.filters.getconf(FILTER_CUSTOM.name, FILTER_CUSTOM.actions, FILTER_CUSTOM.path, FILTER_CUSTOM.medias);

    await FABRIC.extended.filters.apply(image, conf);

    canvas.add(image);
    image.applyFilters();
    canvas.renderAll();

  }, {
    top: 0,
    left: 0,
    width: 1200,
    height: 1800,
    scaleX: 0.5,
    scaleY: 0.5,
    backgroundColor: "#6c757d",
    crossOrigin: "Anonymous"
  });
});