Find the height of a bezier curve in canvas
bezier, canvas
Solution
Yes, there is a simple answer for this constrained version of Bezier curves. Taking the definition of a cubic Bezier curve from wikipedia here, and solving for the mid point along the curve (t=0.5), the minimum value of y will be:
1/4 Ymax + 3/4 Ymin
(Ymax being the y value of the start and end points and Ymin being the y value of the two control points). Or, for the midpoint to be 0,
Ymin = -1/3 Ymax.
So, since you have Ymax = 55, Ymin has to be -1/3*55 = -18.333.. -- which is why 18 worked in your example.
Problem
I am trying to create a simple rounded top to a rectangle. I was able to use the `bezierCurveTo` method to create the cap, but I had to play around with the control point's y values to get the correct height of the curve. If I have the width and I know the height that I want the curve to pass through is their a formula to find the control point's y values? the function I have right now is ``` c.moveTo(130,55); c.bezierCurveTo(130,-18,0,-18,0,55); ``` -18 is what I had to set the y values to to get the curve to approximately pass through y = 0.