var Vector2 = function(x, y) {
        this.x = x;
        this.y = y;
}
Vector2.prototype = {
    "length": function () {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    "normalize": function () {
        var inv = 1 / this.length();
        return new Vector2(this.x * inv, this.y * inv);
    },
    "add": function (v) {
        return new Vector2(this.x + v.x, this.y + v.y);
    },
    "multiply": function (f) {
        return new Vector2(this.x * f, this.y * f);
    },
    "dot": function (v) {
        return this.x * v.x + this.y * v.y;
    },
    "angle": function (v) {
        return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
    }
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var points = [{x:10, y:500}, {x:60, y:300},{x:110, y:400}, {x:160, y:100},{x:210, y:200}, {x:260, y:500}];
var cps = getControlPoint(points);

ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(var i=0;i<points.length;i++){
	ctx.lineTo(points[i].x,points[i].y );
}
ctx.closePath();  
ctx.stroke();

ctx.strokeStyle="#ff0000";
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(var i=0;i<points.length-1;i++){
	ctx.moveTo(points[i].x, points[i].y);
	ctx.bezierCurveTo(
    cps[i * 2 ].x, cps[i * 2 ].y, 
    cps[i*2+1].x, cps[i*2+1].y, 
    points[i + 1].x, points[i + 1].y);
}
ctx.moveTo(points[0].x, points[0].y);
ctx.closePath(); 
ctx.stroke();



function getControlPoint(path) {
    var rt = 0.2;
    var i = 0, count = path.length - 2;
    var arr = [path[0]];
    for (; i < count; i++) {
        var a = path[i], b = path[i + 1], c = path[i + 2];
        var v1 = new Vector2(a.x - b.x, a.y - b.y);
        var v2 = new Vector2(c.x - b.x, c.y - b.y);
        var v1Len = v1.length(), v2Len = v2.length();
        var centerV = v1.normalize().add(v2.normalize()).normalize();
        var ncp1 = new Vector2(centerV.y, centerV.x * -1);
        var ncp2 = new Vector2(centerV.y * -1, centerV.x);
        if (ncp1.angle(v1) < 90) {
            var p1 = ncp1.multiply(v1Len * rt).add(b);
            var p2 = ncp2.multiply(v2Len * rt).add(b);
            arr.push(p1, p2)
        } else {
            var p1 = ncp1.multiply(v2Len * rt).add(b);
            var p2 = ncp2.multiply(v1Len * rt).add(b);
            arr.push(p2, p1)
        }
    }
  	arr.push(path[path.length-1]);
    return arr;
}