如何在图形上输出坐标象限的无限循环函数

<canvas id="myCanvas" width="400" height="400"></canvas>

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

var x = 0;
var y = 0;
var amplitude = 100; // 振幅
var frequency = 0.1; // 频率

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布

  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  ctx.lineTo(canvas.width, canvas.height / 2);
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  ctx.stroke();

  // 绘制函数图形
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);

  for (var i = 0; i < canvas.width; i++) {
    x = i;
    y = canvas.height / 2 - Math.sin((x - canvas.width / 2) * frequency) * amplitude;
    ctx.lineTo(x, y);
  }

  ctx.stroke();

  requestAnimationFrame(draw); // 实现动画效果
}

draw();