How to control quadraticCurve handles position with mouse position?

How can I control quadraticCurve handles position with mouse position without overlapping like here? I need something like this

onMouseMove = function(event) {
    var path = new Path();
    path.moveTo(300,100);
    path.strokeColor = 'blue';
    path.fillColor = 'red';
    // path.fullySelected = true;
    path.quadraticCurveTo(event.point.x,event.point.y,300,500);

}

but without drawing over previous path. Is there any way to achieve dynamic quadraticCurve handles?