Переход рисования линии холста Html5

Здесь у меня есть холст, который рисует линию на холсте... каждые 300 мс рисует линию, но это слишком сложно для глаз...

ССЫЛКА НА ДЕМО: http://jsbin.com/fabalo

КОД:

var test = [{"X":300,"Y":200}];
var set_time;
var m = 0;
var add_array = function(){
  ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
    if(m < pts.length){
       var q = pts[m].X;
       var e = pts[m].Y;
       console.log(test);
       test.push({"X":q,"Y":e});
       mimicSvg(test,1);

       m++;
       set_time = setTimeout(add_array,300);//it call itself again and again until m is more than the length of the array'
    }else{
       clearTimeout(set_time);
    }
};

set_time = setTimeout(add_array,300);

Есть ли способ заставить анимацию плавно работать? Как можно улучшить эту анимацию? Как сделать переход?