var cvs = document.getElementsByTagName("canvas")[0];

var ctx = cvs.getContext("2d");

ctx.strokeStyle="black";

ctx.fillStyle="white";

​

function drawLine(x1,y1,x2,y2,ratio) {

  ctx.fillRect(0,0,300,300);

  ctx.moveTo(x1,y1);

  x2 = x1 + ratio * (x2-x1);

  y2 = y1 + ratio * (y2-y1);

  ctx.lineTo(x2,y2);

  ctx.stroke();

}

​

function animate(ratio) {

  ratio = ratio || 0;

  drawLine(0,0,300,300,ratio);

  if(ratio<1) {

    requestAnimationFrame(function() {

      animate(ratio + 0.01);

    });

  }

}

​

animate();

​

var btn = document.getElementsByTagName("button")[0];

btn.addEventListener("click", function(evt) { 

  cvs.width = cvs.width;

  ctx = cvs.getContext("2d");

  ctx.strokeStyle="black";

  ctx.fillStyle="white";

  animate(0);

});

​