ターゲット3つ移動座標表示

3点を移動させて任意の曲線を描きます。

    
    <div id="app">
    //変数、手続き設定
    let p1=document.getElementById("p1");
    let p2=document.getElementById("p2");
    let p3=document.getElementById("p3");
    let can = document.getElementById("can");
    let con = can.getContext('2d');
    let obj1X, obj1Y;
    let obj1Width, obj1Height;
    let obj2X, obj2Y;
    let obj2Width, obj2Height;
    let obj3X, obj3Y;
    let obj3Width, obj3Height;
    let x, y, relX, relY;
    let dragging1 = false;
    let dragging2 = false;
    let dragging3 = false;
    can.addEventListener('mousedown', onDown, false);
    can.addEventListener('mousemove', onMove, false);
    can.addEventListener('mouseup', onUp, false);
    //**************************************************
    //初期設定
    function init() {
      // オブジェクトの大きさを定義
      obj1Width  = 10;
      obj1Height = 10;
      obj2Width = 10;
      obj2Height = 10;
      obj3Width = 10;
      obj3Height = 10;

      // オブジェクトの座標を定義(キャンバスの中央に表示)
      obj1X  = 600;
      obj1Y  =  20;
      obj2X = 300;
      obj2Y = 300;
      obj3X =  20;
      obj3Y =  20;

      // オブジェクトを描画
      drawRect();
    }
    //**************************************************
    //=============================================================================
    //移動する対象物を特定します。
    function onDown(e) {
    // キャンバスの左上端の座標を取得
    let offsetX = can.getBoundingClientRect().left;
    let offsetY = can.getBoundingClientRect().top;
    // マウスが押された座標を取得
    x = e.clientX - offsetX;
    y = e.clientY - offsetY;
    // オブジェクト上の座標かどうかを判定
    if (obj1X-obj1Width/2 < x && (obj1X + obj1Width/2) > x && obj1Y-obj1Height/2 < y && (obj1Y + obj1Height/2) > y) {
      dragging1 = true; // ドラッグ開始
      relX = obj1X - x;
      relY = obj1Y - y;
      }
    if (obj2X-obj2Width/2 < x && (obj2X + obj2Width/2) > x && obj2Y-obj2Height/2 < y && (obj2Y + obj2Height/2) > y) {
      dragging2 = true; // ドラッグ開始
      relX = obj2X - x;
      relY = obj2Y - y;
      }
    if (obj3X-obj3Width/2 < x && (obj3X + obj3Width/2) > x && obj3Y-obj3Height/2 < y && (obj3Y + obj3Height/2) > y) {
      dragging3 = true; // ドラッグ開始
      relX = obj3X - x;
      relY = obj3Y - y;
      }
    }
    //=============================================================================
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //対象物を移動しましす。
    function onMove(e) {
      // キャンバスの左上端の座標を取得
      let offsetX = can.getBoundingClientRect().left;
      let offsetY = can.getBoundingClientRect().top;
      // マウスが移動した先の座標を取得
      x = e.clientX - offsetX;
      y = e.clientY - offsetY;
      // ドラッグが開始されていればオブジェクトの座標を更新して再描画
      if (dragging1) {
          obj1X = x + relX;
          obj1Y = y + relY;
          drawRect();
      }
      if (dragging2) {
          obj2X = x + relX;
          obj2Y = y + relY;
          drawRect();
      }
      if (dragging3) {
          obj3X = x + relX;
          obj3Y = y + relY;
          drawRect();
      }
      //3点曲線を描く関数
    }
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //--------------------------------
    //ドラッグを放します。
    function onUp(e) {
      dragging1 = false; // ドラッグ終了
      dragging2 = false; // ドラッグ終了
      dragging3 = false; // ドラッグ終了
    }
    //--------------------------------
    //000000000000000000000000000000000000000000000000000000000000000000000
    //対象物,曲線,直線を描画します。
    function drawRect() {
      con.fillStyle="rgba(0,0,0,0.3)";
      con.clearRect(0, 0, can.width, can.height); // キャンバスをクリア
      con.fillRect(obj1X-obj1Width/2, obj1Y-obj1Height/2, obj1Width, obj1Height);
      con.fillRect(obj2X-obj2Width/2, obj2Y-obj2Height/2, obj2Width, obj2Height);
      con.fillRect(obj3X-obj3Width/2, obj3Y-obj3Height/2, obj3Width, obj3Height);
      con.beginPath();
      con.moveTo(obj1X, obj1Y);
      con.quadraticCurveTo(obj2X, obj2Y, obj3X, obj3Y);
      con.strokeStyle="black";
      con.lineWidth=1;
      con.stroke();
      con.beginPath();
      con.moveTo(obj1X, obj1Y);
      con.lineTo(obj2X, obj2Y);
      con.lineTo(obj3X, obj3Y);
      con.strokeStyle="red";
      con.lineWidth=1;
      con.stroke();
      p1.innerHTML="x="+obj1X+"][y="+obj1Y+"&x2="+obj2X+",y2="+obj2Y+"&x3="+obj3X+",y3="+obj3Y;
    }
    //000000000000000000000000000000000000000000000000000000000000000000000
  </script>