Why is Html Canvas setLineDash not working?

I was recently following on the free code camp Javascript Self-Driving Car course and got to about 41:50 without any major issues, but when I got to making the inner road lines dashed, the function ctx.setLineDash([20,20]); just wasn’t working. What I had so far was drawing solid lines perfectly fine but when I put that statement in, it wouldn’t draw any lines.

I tried to put the line in different places like after the beginPath statement, but nothing was working. Here is the code that I have so far

Road.js

class Road {
  constructor(x, width, laneCount = 3) {
    this.x = x;
    this.width = width;
    this.laneCount = laneCount;

    this.left = x - width / 2;
    this.right = x + width / 2;

    const infinity = 1000000000;
    this.top = -infinity;
    this.bottom = infinity;
  }

  draw(ctx) {
    ctx.lineWidth = 5;
    ctx.strokeStyle = "white";

    for (let i = 0; i <= this.laneCount; i++) {
      const x = lerp(
        this.left,
        this.right,
        i/this.laneCount
      )
      if (i > 0 && i < this.laneCount) {
        ctx.setLineDash([20,20]);
      } else {
        ctx.setLineDash([])
      }
      ctx.beginPath();
      ctx.moveTo(x, this.top);
      ctx.lineTo(x, this.bottom);
      ctx.stroke();
    }
  }
}

function lerp(A, B, t) {
    return A + (B-A)*t;
}

main.js

 const canvas = document.getElementById("myCanvas");
 canvas.height = window.innerHeight;
 canvas.width = 200;
 const ctx = canvas.getContext("2d");
 const road = new Road(canvas.width / 2, canvas.width * 0.9, 4);
 
 animate();
 
 function animate() {
    canvas.height = window.innerHeight;
    road.draw(ctx);
    requestAnimationFrame(animate);
 }

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Self-Driving Car</title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="road.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Css

body {
    margin: 0;
    background: darkgrey;
    overflow: hidden;
    text-align: center;
}

#myCanvas {
    background: lightgray;
}