[Feature]: Toggle visibility of items in clipPath

[bitttttten]

CheckList

• [X] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have searched and referenced existing issues, feature requests and discussions
• [X] I am filing a FEATURE request.

Description

We are using clipRect to have a kind of "artboard", where the user can have a full screen canvas.

For example, in the following 3 screenshots I can add some text, drag them to the edge my artboard, and have it cropped.

This works great for us. However if we drag the text further out, and release, then the item seems to dissappear:

We would love to be able to have some kind of transparency effect or toggle the visibility of the clipPath here.

Does fabric support this.

We are doing:

    const clipRect = new Rect({
      width: this.width,
      height: this.height,
      absolutePositioned: true,
    })
    const frame = new Group([], {
      layoutManager: new LayoutManager(new ClipPathLayout()),
      selectable: this.selectable,
      subTargetCheck: true,
      interactive: true,
      clipPath: clipRect,
    })

    // and now we add items to our frame

Any suggestions is appreciated!

Current State

The current behaviour is that the clipPath is hiding all items, however, for our use case we want to show the items or have them at half transparency.

In other editors, for example, you can have this effect:

Additional Context

No response

[asturur]

Instead of a clipPath for the canvas, you can use a custom overlay, It works way easier and has not the performance degradation of the clipPath.

Maybe i can make this an official example.

[bitttttten]

Maybe i can make this an official example.

That sounds great! If you need any help with it let me know @asturur

For now I can't get this working.. I have tried

    const overlayImage = new FabricImage(new window.Image())
    overlayImage.set({ backgroundColor: 'rgba(255,255,255,.25)', width, height })
    const canvas = new Canvas(this.canvasElem, {
      overlayColor: 'rgba(0,0,0,.25)',
      overlayImage,
      width,
      height,
    })

Although this makes all the elements appear faded in the frame. It's a lot closer than the clipRect, which is what I am looking for.

You can see here for example that the text is faded in the canvas, including the controls, because the overlayImage is white with 25% opacity.