Mouse Over Bezier Curve

Is there any easy integrated way to detect a mouseover event on a curve? I wish to add bezier curves to the canvas as movable and editable elements and I need a way to select them

Solution 1:

This answer was written several years ago and since kinetic.js is no longer maintained and the links don't work.

You can try concrete.js (http://www.concretejs.com).

I would check the kinetic.js library. It is html5 canvas library, that supports many features including curve detection. You can try some examples here:

http://www.html5canvastutorials.com/labs/html5-canvas-curve-detection-tutorial/

http://www.html5canvastutorials.com/labs/html5-canvas-physics-engine-with-curve-detection/

http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/

If you do not want to use other libraries and still have great speed, you could try the following approach.