クリックした座標にcanvasの線を伸ばしたい

Question

javascriptでcanvasのアニメーションで伸びる糸をクリックした座標へもっていくようにしたいのですがうまくいきません。
それぞれcx,cyと言う座標からe.clientX/Yで取得した座標ikex,ikeyまで放物線もしくは直線で伸ばしたいです。

以下コードでcy/ikey, cx/ikexとそれぞれ開始座標を目標の座標で割っておりこれだと
きれいに目標へと向かう曲線もありますが、x座標cx、またはy座標cyが大きく目標ikex,ikeyからそれてしまいます。いろいろ試した中でこれが一番理想に近いのですが、ここから先に進むことができません。きれいに目標へ向かう方法はないでしょうか？
宜しくおお願いします。

function saoaction(){

ike.addEventListener('click',function(e) {
function tobiito() {




        var cx=656,cy=461,
            cx2=824,cy2=376;


           var ikex = e.clientX;
           var ikey = e.clientY;
          var linectx = line.getContext('2d');
              linectx.lineWidth = '0.1';

              line.width = 1000;
              line.height = 500;

         var acx = 0, acy = 0,
             acx2 = 0,acy2 = 0;
             var a,b;

             console.log(ikex);
             console.log(ikey);




if(ikex <= cx ){
var starttimer = setInterval(function() {
linectx.beginPath();
const saosaki1 = linectx.moveTo(cx,cy);

a+=1;

acy = cy/ikey;　

acx = cx/ikex; 



linectx.lineTo(cx-=acx,cy-=acy);


linectx.stroke();
 ike.appendChild(line);



if(cx == ikex && cy == ikey){
  clearInterval(starttimer);
   console.log('止まったよ');
}

}, 10);

}