Attempting to modify the code to copy the visualizer and mirror it, and while I can mirror it, it is overwriting the top line, and I have no clue why

[Nickwilde7755]

I am fairly new to HTML and have not ever touched the canvas so this is definitely my incompetence. Anyway, what am I doing wrong? Here is the specific modification im making

function livelyAudioListener(audioArray) 
{
  maxVal = 1;
  for (var x of audioArray) {
    if (x > maxVal) maxVal = x;
  }

  const offSet = vizWidth / audioArray.length;
  const arrMid = audioArray.length / 2;
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.lineJoin = "round";
  ctx.moveTo(startPos - offSet * 3, midY);
  ctx.lineTo(startPos, midY);
  let posInLine = -1;
  for (var x = 0; x < audioArray.length; x++) {
    posInLine++;
    ctx.lineTo(
      startPos + offSet * posInLine,
      midY - (audioArray[x] / maxVal) * max_height
    );
    if (square)
      ctx.lineTo(
        startPos + offSet * (posInLine + 1),
        midY - (audioArray[x] / maxVal) * max_height
      );
  }
  ctx.lineTo(startPos + offSet * (posInLine + (square ? 1 : 0)), midY);
  ctx.lineTo(startPos + offSet * (posInLine + (square ? 4 : 3)), midY);

  ctx.fillStyle = gradient;
  ctx.fill();
  renderLine(linesColor);
  //might go wrong
  ctx.lineTo(startPos - offSet * 3, midY);
  renderLine(linesColor);
  maxVal = 1;
  for (var x of audioArray) {
    if (x > maxVal) maxVal = x;
  }
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.lineJoin = "round";
  //ctx.moveTo(startPos - offSet * 3, midY);
  ctx.lineTo(startPos, midY);
  posInLine = -1;
  for (var x = 0; x < audioArray.length; x++) {
    posInLine++;
    ctx.lineTo(
      startPos + offSet * posInLine,
      midY - (audioArray[x] / maxVal) * max_height * -4
    );
    if (square)
      ctx.lineTo(
        startPos + offSet * (posInLine + 1),
        midY - (audioArray[x] / maxVal) * max_height * -4
      );
  }
  ctx.lineTo(startPos + offSet * (posInLine + (square ? 1 : 0)), midY);
  ctx.lineTo(startPos + offSet * (posInLine + (square ? 4 : 3)), midY);

  ctx.fillStyle = gradient;
  ctx.fill();
  renderLine(linesColor);
}

everything after the comment is where it changes (besides me tweaking the size of the bars as I keep my volume fairly low)