<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;

function draw() {
  // 画面をリセット
  ctx.clearRect(0, 0, canvasW,canvasH);
  ctx.lineWidth = 5; // 線の太さ
  ctx.beginPath(); // 線の開始

  const segmentNum = 100; // 分割数
  const amplitude = canvasH / 3; // 振幅
  const time = Date.now() / 1000; // 媒介変数(時間)
  
  for (let i = 0; i < segmentNum; i++){
    const x = (i / (segmentNum-1)) * canvasW;
    // ラジアン
    const radian = (i / segmentNum) * Math.PI+time;
    // const radian = (segmentNum/i) * Math.PI+time;
    // Y座標
    // const y = amplitude * Math.sin(radian) + canvasH / 2;
    const y = amplitude * Math.cos(radian) + canvasH / 2;
  
    if (i === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }
  ctx.stroke(); // 線を描く

  window.requestAnimationFrame(draw);
}

draw();