FabricJS: is there a way to make object unselectable outside of clip mask?

Question

I am creating grid on fabric canvas, where the user can upload images in each cell of a grid. Each cell has a clipping mask, and everything is fine. But my problem is, that if the user moves an image in one cell you can see selection outside of the clipping mask. Is there a way to keep the selection inside clipping mask? here is a screen shot

Answer 1

Try to add in your canvas options the next option controlsAboveOverlay: true

const canvas = new fabric.Canvas("c", {
  controlsAboveOverlay: true
});

http://fabricjs.com/docs/fabric.Canvas.html#controlsAboveOverlay

Edit: Added an example with perPixelTargetFind option

https://codesandbox.io/s/kind-shtern-hq20u?file=/src/index.js