Search code examples
coordinateshtml5-canvaskineticjscurve

HTML5 Canvas: get curve's coordinates


I have a quadratic curve in canvas (defined by start, end and control point). What I need is to get more of the curve's coordinates (eg. the middle, quarters etc.). With that, I'd be able (after a few iterations of finding coordinates) to animate an object based on this curve (I know it can be done easily with SVG, but that's not an option).

enter image description here

image taken from http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/

Is there an easy way to do this? When I checked for bisecting curve on google, the only thing I found was some complicated Math including drawing, which is out of the question.


Solution

  • These functions may be of interest to you:

    Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y)
    Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y)