ベジェ曲線終点drug

      
        <script>
          let endx=25;let bx=25;
          let endy=63;let by=63;
          //div id="aaa"の中身をscliptで扱えるようにします。
          let cav=document.getElementById("sss");
          let cot=cav.getContext("2d");
          let p=document.getElementById("p");
          // 二次曲線
          cot.beginPath();
          cot.moveTo(75, 25);
          cot.quadraticCurveTo(25, 25, endx, endy);
          cot.stroke();
          //タケノコの絵を動かせるようにします。
          let ep = document.getElementById("endPoint");
          ep.innerText="終";
          ep.style.position = "absolute";
          ep.style.top = endy+70 + "px";
          ep.style.left = endx+10 + "px";
  
          //ドラッグのはじめ何もしません。
          ep.ondragstart = function(event){
          return false;}
          //左ボタンが押されたときの操作です。
          ep.onmousedown = function(event){
            //マウスの動きを見ます。
            document.addEventListener("mousemove",onMouseMove);}
            //マウスの動きにノコの場所を合わせます。  
            let onMouseMove = function(event){
            let x = event.clientX;
            let y = event.clientY;
            //マウスターゲットの位置
            ep.style.top =y-24+ "px";
            ep.style.left = x-8+ "px";
            // 曲線消去
            cot.beginPath();
            cot.moveTo(75, 25);
            cot.quadraticCurveTo(25, 25, endx, endy);
            cot.strokeStyle="#cde";
            cot.lineWidth=3;
            cot.stroke();
                endx=event.clientX-18;
              endy=event.clientY-90;
            // 二次曲線
            cot.beginPath();
            cot.moveTo(75, 25);
            cot.quadraticCurveTo(25, 25, endx, endy);
            cot.strokeStyle="black";
            cot.lineWidth=1;
            cot.stroke();
          }
          //マウスの左ボタンが離れたら動きを見るのをやめます。
          ep.onmouseup = function(event){
              document.removeEventListener("mousemove",onMouseMove);
          }
        </script>