I am using Fabric.js to draw paths by default the selected event only captures click intersection with the bounding box of the path. This is problematic when you have multiple paths whose bounding boxes overlap each other but the paths themselves are visually distinguishable to an end user.
Is there anyway to do pixel perfect path selection or to select the path that is closest to the users click?
I couldn't find any precise way to do this for paths generally.
The solution I have come to works satisfactorily for my exact scenario, which is for simple bezier curves between a start and end point.
It involves testing for the closest straight line to the point where the mouse click was in the canvas.
There is a working implementation of the calculations required for this here.