Lissajous trail

let trail = [];
function init() {}
function tick({ ctx, frame, width, height }) {
  ctx.fillStyle = "rgba(10,10,10,0.08)";
  ctx.fillRect(0, 0, width, height);
  const t = frame * 0.02;
  const x = width/2 + Math.sin(t * 1.0) * width * 0.4;
  const y = height/2 + Math.sin(t * 1.41) * height * 0.4;
  trail.push({ x, y });
  if (trail.length > 200) trail.shift();
  ctx.strokeStyle = "#f472b6";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i < trail.length; i++) {
    const p = trail[i];
    if (i === 0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y);
  }
  ctx.stroke();
}