Minimal distance from point to cubic bezier curve?

I’m porting WireIt to jQuery.
I need to detect mouseover on wires (bezier curves drawn on <canvas>) - not the mouseover on the entire <canvas>.
I’ve seen two techniques used:[LIST]
[]Native html5 canvas isPointInPath:
FAILS - It detects the changed matrix, not the changed pixels, i,e:

]Pixel-level access to the canvas:

var imgData = ctxt.getImageData(mousePos.x, mousePos.y, 1, 1);
var pixel =;
if (!(pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0 && pixel[3] === 0)) {

Checks whether something is drawn on that pixel, if it is, trigger mouse over.
FAILS - Firefox has a huge performance issue:

I’m currently developing the idea of a third solution:

var point = getMousePosition();
var minimalDistance = calculateMinDistance(curve, point);
if (minimalDistance < curve.width/2 ) {

Checks the minimal distance of the mouse pointer to the drawn curve (it’s a cubic bezier curve) and if the distance is lower then 1/2 of the width , trigger mouseover.
This is a demo of a working action script algorithm.
A java implementation which claims to work but I cant .
Javascript implementation - a! not that easy - the hosting for the code and example is expired.

These are all implementations of an algorithm described in the book Graphic Gems but I cant find it, even in university library.
I’ve translated the implementations above to javascript but they does not work as expected - output is wrong.

  1. Even if I got it working will the algorithm require less computing than the current performance ?
  2. I strictly followed the algorithm, why are the results faulty ?I’ve attached a zip with my attempts. One zip contains only test files, other also includes the original acitonscript . If anyone would bother.