Control Points In Canvas Shape

I have made canvas Shapes(squares) in kinetic js having 4 control points on each of their vertices.A user can click and drag these control points and distort the shape any way he/s

Solution 1:

In looking at the history of your posts, you have previously been using Cubic Bezier Curves.

Each Bezier curve has 4 control points so you need 4 anchors--not 3 as you show. The control points are: (1) starting point (a corner) (2) mid point influencing the starting point (3) mid point influencing the ending point (4) ending point (a corner).

But your fiddle uses just one control point on your curve between the corners. This indicates a Quadratic Curve instead of a Cubic Bezier Curve.

Each Quadratic curve has 3 control points so you need 3 anchors as in your fiddle. The control points are: (1) starting point (a corner) (2) middle control point influencing the curve (3) ending point (a corner).

So if instead you want the user to drag on a quadratic curve to manipulate that curve, you can approximate the resulting middle quadratic control point using this math:

var controlPointX = 2*mouseX -startpointX/2 -endpoinX/2;
var controlPointY = 2*mouseY -startpointY/2 -endpointY/2;

Here's a Demo having the user drag to adjust a Quadratic curve:

http://jsfiddle.net/m1erickson/f4ag0myj/