Get a point inside bezier curve

Question

I\' using KineticJS to drawing a logo, both top an bottom lines are bezierCurveTo.

I need to draw lines between them and so I need to locate the points inside both curv

Answer 1

Given an X coordinate: How to get the Y coordinate of 2 vertically stacked bezier curves.

I can think of 2 ways, both use “brute force”.

First method: examine pixels:

• Draw both your beziers on a separate canvas.
• Use context.getImageData to get an array of all the vertical pixels on the canvas at coordinate X.
• Iterate through each vertical Y pixel at your desired X coordinate
• If you find a non-transparent pixel, you've hit the Bezier (and it's Y)
• Iterate from top to bottom until you find the top bezier Y.
• Iterate from bottom to top until you find the bottom Bezier Y.

Here is code and Fiddle for the first method: http://jsfiddle.net/m1erickson/uRDYf/

Second method: use the Bezier curve formula to repeatedly "guess" the Y coordinate.

FYI, the cubic Bezier actually does have a formula

// where ABCD are the control points and T is an interval along that curve

function CubicN(T, a,b,c,d) {
    var t2 = T*T;
    var t3 = t2*T;
    return a + (-a * 3 + T * (3 * a - a * T)) * T
    + (3 * b + T * (-6 * b + b * 3 * T)) * T
    + (c * 3 - c * 3 * T) * t2
    + d * t3;
}

And you can calculate XY points along that formula like this:

// cubic bezier T is 0-1
// When T==0.00, you are at the beginning of the Curve
// When T==1.00, you are at the ending of the Curve
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
    return({x:x,y:y});
}

So the second method is to repeatedly "guess" T values along your curve using getCubicBezierXYatT.

When the returned X is your desired X, you also have your desired Y.

I haven't tried it, but this SO post uses something called the Newton-Raphson refinement to make better than random guesses:

Getting y from x co-ord for cubic bezier curve, fast Newton-Raphson method