Image masks through any shapes

[vavilon224]

Hello everyone, maybe someone will need this logic)))

I've been tormented for a decent amount of time

`
**###

 export const addMask = (canvas, points) => {
  if (points) {
    const selectedObject = canvas.getActiveObject();
    const image = new Image();
    image.src = selectedObject._originalElement.currentSrc;
    image.crossOrigin = 'anonymous';
    const { width, height, scaleY, scaleX, top, left, zoomX, zoomY } = selectedObject;
    const svgMask = new fabric.Polygon(points, {
      originX: 'center',
      originY: 'center',
      strokeWidth: 0,
      layersType: 'shape',
      left: 0,
      top: 0,
      strokeLineJoin: 'bevel',
    });

    svgMask.scaleToWidth(scaleX * width);
    svgMask.scaleToHeight(scaleY * height);
    image.onload = function() {
      const img = new fabric.Image(image);

      img.set({
        imageFormat: 'image',
        navigationType: 'images',
        originX: 'center',
        originY: 'center',
        flipX: false,
        flipY: false,
        layersType: 'image',
        imageFilters: selectedObject.imageFilters,
        filters: selectedObject.filters,
      });
      img.scaleToWidth(scaleX * width);
      img.scaleToHeight(scaleY * height);
      img.applyFilters();
      img.setCoords();

      const group = new fabric.Group([img], {
        clipPath: svgMask,
        layout: 'clip-path',
        imageFormat: 'image',
        navigationType: 'images',
        layersType: 'image',
        top,
        left,
        zoomX,
        zoomY,
      });

      group.scaleToWidth(scaleX * width);
      group.scaleToHeight(scaleY * height);

      canvas.remove(selectedObject);
      group.center().setCoords();
      canvas.add(group).setActiveObject(group).renderAll();
    };
    canvas.renderAll();
  }
}
**`

[vavilon224]

const selectedObject = canvas.getActiveObject();

Already uploaded and added picture

[vavilon224]

[Arkit-Sutariya]

Is it possible to select only the clip-path area instead of the entire image, similar to Canva's frame image feature?

[ShaMan123]

#6311?

[partheev-appyhigh]

@vavilon224 Why are you setting svgMask to group object? why don't you set svgMask as img clipPath? Because I can see that group has only one object, can we do this without introducing group?