Draw a line while pressed mouse is moved over the canvas

Code below is  drawing line by mowing mouse on canvas while  left mouse button is pressed . My needs variate from it because it clears all other existing shapes on canvas and it draws curve line as mouse is making path while moving over the canvas.

What I need is to have straight line from point when mouse was pressed  to  the point where mouse is in that moment while mouse is moving and to finish the line  after mouse is relisted.  And then to press mouse again at point where previous line was finished , drew another line same way as first was created and so on until polyline is complete.
I was trying also other codes but now i think i am on right way to achieve what is needed and  that it will not interfere  with my existing  app.

I am using fabric.js.

var Paramter = function(){

    this.flag = false,  //
    this.type = 'line', //
    this.point = [],    //
    this.lineWidth =1,      //
    this.lineStyle = [0,0],   //
    this.lineColor = 'rbga(0,0,0,1)', //
    this.fillColor = 'rbga(0,0,0,1)',  //
    this.ctn = undefined                  //

}

Paramter.prototype.setValue = function(key,value){
    for(var i in this){
        if(this.hasOwnProperty(i)){
            if(i===key){
                this[i] = value;
                return;
            }
        };
    }
}

Paramter.prototype.getValue = function(key){
    return this[key]
}
Paramter.prototype.addKey = function(key,val){
    this[key] = val;
}
Paramter.prototype.removeKey = function(key){
    this[key] = undefined;
}
var para = new Paramter();



var canvasWrite = new fabric.Canvas('canvas',{
    allowTouchScrolling:false,
    isDrawingMode : false
});

canvas.on('mouse:down',function(e){
    if(para.type!='line') return;
    var _point = [];
    _point.push({
        x:e.e.x,
        y:e.e.y
    });
    para.setValue('point',_point);
    para.setValue('flag',true);
});

canvas.on('mouse:move',function(e){
    if(!para.flag) return;
   canvas.clear()
    var _point = para.point;
    _point.push({
        x:e.e.x,
        y:e.e.y
    });
    para.setValue('point',_point);
    var line = new fabric.Polyline(_point,{
        left:_point[0]['x'],
        top:_point[0]['y'],
        strokeWidth : para.getValue('lineWidth'),
        stroke : para.getValue('lineColor'),
        strokeLineCap:'round',
        strokeLineJoin:'round',
        fill:null
    });
    line.setShadow('0px 0px 3px rgba(0,0,0,1)')
    canvas.add(line)
});

canvas.on('mouse:up',function(e){
    para.setValue('point',[]);
    para.setValue('flag',false);
});

Select allOpen in new window