Control Points in Canvas shape

Question

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/she pleases. I also tried adding control points in the mid-point of each line by adding additional anchors and plugging them into the Bezier Curve..The js fiddle is http://jsfiddle.net/Lucy1/opsy1pn9/4/

The corresponding JS code is

   var room = new Kinetic.Shape({
    x: 0,
    y: 0,
    width: w,
    height: h,
    stroke: "blue",
    fill: 'red',
    drawFunc: function (context) {
        var x = this.x();
        var y = this.y();
        var w = this.width();
        var h = this.height();
        var tlX = this.anchorTL.x();
        var tlY = this.anchorTL.y();
        context.beginPath();
        context.moveTo(tlX, tlY);
        // top
        context.bezierCurveTo(x + w / 3, y, this.anchorTM.x(), this.anchorTM.y(), this.anchorTR.x(), this.anchorTR.y());
        // right
        context.bezierCurveTo(x + w, y + h / 3, this.anchorRM.x(), this.anchorRM.y(), this.anchorBR.x(), this.anchorBR.y());
        // bottom
        context.bezierCurveTo(x + w * 2 / 3, y + h, this.anchorBM.x(), this.anchorBM.y(), this.anchorBL.x(), this.anchorBL.y());
        // left
        context.bezierCurveTo(x, y + h * 2 / 3, this.anchorLM.x(), this.anchorLM.y(), tlX, tlY);

        context.closePath();
        context.fillStrokeShape(this);
    }
});

g.add(room);

room.anchorTR = makeAnchor(w, 0, g);
room.anchorBR = makeAnchor(w, h, g);
room.anchorBL = makeAnchor(0, h, g);
room.anchorTL = makeAnchor(0, 0, g);

room.anchorTM = makeAnchor(w/2,0,g);
room.anchorRM = makeAnchor(w,h/2,g);
room.anchorLM = makeAnchor(0,h/2,g);
room.anchorBM = makeAnchor(w/2,h,g);

layer.draw();
}

The problem i am facing is that the mid-point control points are not moving with the line like the control points situated at the vertex..Please Help.

Answer 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/