Path selection using fabricjs on html5 canvas

Question

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?

Answer 1

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.

Answer 2

I don't know if this was implemented when the question was asked, but after some digging I found that there is a property on objects (and on the whole canvas) that enables pixel-perfect selection: It is called perPixelTargetFind. (http://fabricjs.com/fabric-intro-part-4#customization section "Clickable area")

There is also a property for the tolerance: targetFindTolerance. The whole thing even works with cutom objects.

It took me too long to find that information so I hope this will help some people