<canvas id="myCanvas" width="1250" height="120"></canvas>

  <script>

    var canvas = $("#myCanvas")[0];
    var c = canvas.getContext("2d");
    var amount = 0;
    var startX = 164;
    var startY = 120;
    var endX = 1094;
    var endY = 120;

    setTimeout(function() {
    var interval = setInterval(function() {
        amount += 0.005; // change to alter duration
        if (amount > 1) {
            amount = 1;
            clearInterval(interval);
        }
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.lineWidth=1;
        c.strokeStyle="#707070";
        c.moveTo(startX, startY);
        // lerp : a  + (b - a) * f
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 0);

}, 3000);

</script>

this.canvas = canvas;
this.context = this.canvas.getContext("2d");
var _this = this;
var setDim = function() {
    _this.w = _this.canvas.clientWidth;
    _this.h = _this.canvas.clientHeight;
    _this.canvas.width = _this.w;
    _this.canvas.height = _this.h;
    _this.dimChanged = true;
    _this.draw();
};
setDim();
$(window).resize(setDim);