<canvas id="canvas"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth * devicePixelRatio;
canvas.height = window.innerHeight * devicePixelRatio;

const canvasW = canvas.width;
const canvasH = canvas.height;

//ベジェ曲線の変形
let y = 150;//制御点のy座標初期値
function curve() {
  y++;
  ctx.clearRect(0, 0, canvasW, canvasH);
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.quadraticCurveTo(600,y,1100,100);//制御点の座標を変数化
  ctx.stroke();
  if (y > 1000) {
    y = 150;
  }
  requestAnimationFrame(curve);
}
curve();

//制御点の移動のイメージ
function controlPointMove() {
  ctx.clearRect(0, 0, canvasW, canvasH);
  ctx.moveTo(600, y);
  ctx.arc(600, y, 10, 0, Math.PI * 2);
  ctx.stroke();
  ctx.moveTo(600, y);
  ctx.lineTo(100, 100);
  ctx.moveTo(600, y);
  ctx.lineTo(1100, 100);
  ctx.stroke();
  ctx.closePath();
  requestAnimationFrame(controlPointMove);
}
controlPointMove();