quadratic

I have a question regarding formula curving through a control point. As you know, HTML Canvas has quadraticCurveTo(x1, y1, x2, y2) with x1 and x2 being the control point. However when you try to draw a stroke using it, the stroke will never touch the control point. So we have this formula: x1 = xt * 2 - (x0 + x2) / 2; y1 = yt * 2 - (y0 + y2) / 2; (xt, yt) = the point you want to curve through. t for tangent as it is 90 degrees perpendicular at that point. This recalculates the control point position. I got this formula from a book, however the book doesn't explain how it is been derived. I

I have three points in 2D and I want to draw a quadratic Bézier curve passing through them. How do I calculate the middle control point ( x1 and y1 as in quadTo)? I know linear algebra from college but need some simple help on this. How can I calculate the middle control point so that the curve passes through it as well? Let P0, P1, P2 be the control points, and Pc be your fixed point you want the curve to pass through. Then the Bezier curve is defined by P(t) = P0*t^2 + P1*2*t*(1-t) + P2*(1-t)^2 ...where t goes from zero to 1. There are an infinite number of answers to your question, since it

I'd like to calculate a point on a quadratic curve. To use it with the canvas element of HTML5. When I use the quadraticCurveTo() function in JavaScript, I have a source point, a target point and a control point. How can I calculate a point on the created quadratic curve at let's say t=0.5 with "only" knowing this three points? xan Use the quadratic Bézier formula, found, for instance, on the Wikipedia page for Bézier Curves : In pseudo-code, that's t = 0.5; // given example value x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x; y = (1 - t) * (1 - t) * p[0].y + 2 *