Calculate Control Point to Make Your Canvas Curve Hit a Specific Point

Creating curves in HTML5 Canvas is usually achieved with quadraticCurveTo() that has 1 control point or bezierCurveTo() that has 2 control points. In some cases, it might be highly desirable to control the point that the curve hits when drawing with quadraticCurveTo. It is pretty simple, but can be a bit tricky. All it requires, is a little formula that we’ll see in a bit.

Continue reading “Calculate Control Point to Make Your Canvas Curve Hit a Specific Point”