Linear Interpolation

HTML

<canvas width='500' height='500'></canvas>

JavaScript

var Vector = function(x, y) {
    this.x= x||0,
    this.y= y||0
};
Vector.prototype.multiply=function(v){
    return new Vector(this.x * v, this.y * v);
};
Vector.prototype.add=function(vec){
    return new Vector(this.x + vec.x, this.y + vec.y);
};
Vector.prototype.subtract=function(vec){
    return new Vector(this.x - vec.x, this.y - vec.y);
};

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

var t=0;
// Notice, instead of four points for the Bezier curve, this simply
// uses the start and end points.
var startPoint = new Vector(0,0);
var endPoint = new Vector(1,1);
function render(){
    var p = linearlyInterpolate(t*0.01, startPoint, endPoint);
    ctx.save();
    ctx.translate(p.x*200,p.y*200);
    ctx.beginPath();
    ctx.rect(0,0,2,2);
    ctx.fill();
    ctx.restore();
}

// An implementation of linear interpolation.
function linearlyInterpolate(t, v0, v1){
    return v0.multiply(1 - t).add(v1.multiply(t));
}
(function loop(){
    if(t==100){
        t=0;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    } 
    render();
    t++;
	window.requestAnimationFrame(loop);
})();