For example, if the mouse clicks anywhere in the yellow area (the overlap), the red rectangle should be selected because its area is smaller. Similarly, if the mouse clicks the yellow area where the purple circle overlaps with another shape, the purple circle should be selected.

Without knowing the drawing order, how to implement the feature with fabric.js: when clicking anywhere in the overlapping part of some shapes, the one with the smaller area is selectable?

Thanks.