Bezier

// set up a stage
var stage = new Kinetic.Stage({
    // the id of the div we will host this in
    container: 'test2',
    width: 400,
    height: 400
});
// make layers, controlpoints, curce and background
var controlLayer = new Kinetic.Layer();
var curveLayer= new Kinetic.Layer();
var background = new Kinetic.Layer();
// draw the bezier curve
// just pick up the context and draw as normal in a canvas
function drawCurve() {
    var context = curveLayer.getContext();
    context.clear();
    context.beginPath();
    context.moveTo(cp[0].getX(), cp[0].getY());
    context.bezierCurveTo(cp[1].getX(), cp[1].getY(),cp[2].getX(), cp[2].getY(),cp[3].getX(), cp[3].getY());
    context.setAttr('strokeStyle','black');
    context.setAttr('lineWidth',4);
    context.stroke();
}

// set up the background
var back = new Kinetic.Rect({
    x:0, y:0, width:stage.getWidth(), height:stage.getHeight(),
    fill: '#ffffee', stroke: 'black', strokeWidth: 1
});
background.add(back);

// set up control points in an array
var cp=new Array();
cp[0]=new Kinetic.Circle({x:40,y:stage.getHeight()-50,radius:10,
                             fill:'red',stroke: 'black', strokeWidth: 1});
cp[1]=new Kinetic.Circle({x:40,y:50,radius:10,
                             fill:'blue',stroke: 'black', strokeWidth: 1});
cp[2]=new Kinetic.Circle({x:stage.getWidth()-40,y:50,radius:10,
                             fill:'blue',stroke: 'black', strokeWidth: 1});
cp[3]=new Kinetic.Circle({x:stage.getWidth()-40,y:stage.getHeight()-50,radius:10,
                             fill:'red',stroke: 'black', strokeWidth: 1});
                             // make them draggable and place them in control layer
for(var ix=0;ix < cp.length;ix++){
    var theP=cp[ix];
    theP.setDraggable(true);
    theP.on('mouseover  touchstart', function() {
        //document.body.style.cursor = 'pointer';
        stage.container().style.cursor= 'pointer';
    });
    // make on top
    theP.on('mouseout', function() {
      stage.container().style.cursor=  'default';
    });
    theP.on("dragend",function(){
        drawCurve();}
    );
    controlLayer.add(theP);
}
//update curvve when draing controlpoints
controlLayer.on('beforeDraw', function() {
  drawCurve();
});
 
// lets get on stage
stage.add(background);
stage.add(curveLayer);
stage.add(controlLayer);
drawCurve();