Clip selection area to ClipTo - Fabric JS

Question

I am currently using Fabric.js for a web application that allows users to input and manipulate the canvas objects in a structured way.

One of our mechanisms for providing structure is to have 'bounding boxes' into which a user can place an image. When an image is placed into these, they can be panned and zoomed, but are clipped to the original bounding box's size and location.

Example: A clipped image

Here we see the clipped area, with its controls visible outside of it's clipped zone.

This is fine. The user can pan the image around, and the clipping box stays static. We are find with this.

However, if the client adds another image, and this image is underneath the area where the first image spans (but is not visible due to clipping) we cannot select the second object.

Example:

A selection obscured, clipped image

Here the face image is underneath where the golf image extends, outside of its clip range. The face image is not selectable without deselecting. One can imagine that if all three are here, it's possible to permanently obscure the selection area of the face image, without moving the other two images to reach it.

Answer 1

Turns out this is a feature of perPixelTargetFind, and I wasn't aware, I assumed it would only work for png transparency, not clipping transparency.

So if you are also facing this issue, simply turn on perpixeltargetfind, and you will probably solve your problem.

Thanks!