'No collision between circles and drawn lines in matter.js

I am having trouble creating a line in p5/matter.js. My sketch is available on the p5 editor. On mousePressed and mouseDragged, the code grabs the mouse position every ten moves and uses curveVertex to draw a line between the current and last point. All of these points are stored in an array. This draws on the canvas perfectly but cannot interact with other objects.

function mouseDragged(){
  if (pointCount == 0) {
    points.push({x: mouseX, y: mouseY});
    pointCount += 1;
  } else if (pointCount == 10) {
    pointCount = 0;
  } else {
    pointCount += 1;
  }
}

function mousePressed(){
  points.push({x: mouseX, y: mouseY});
}

function mouseReleased(){
  line = new Line(points);
  console.log(points);
}

function draw() {
  background("#efefef");
  circles.push(new Circle(200, 50, random(5, 10)));
  Engine.update(engine);
  for (let i = 0; i < circles.length; i++) {
    circles[i].show();
    if (circles[i].isOffScreen()) {
      circles[i].removeFromWorld();
      circles.splice(i, 1);
      i--;
    }
  }
  // for (let i = 0; i < boundaries.length; i++) {
  //   boundaries[i].show();
  //   // console.log(boundaries[i].body.isStatic)
  // }
  if (points.length > 0) {
    // Loop through creating line segments
    beginShape();
    noFill();

    // Add the first point
    stroke('black');
    strokeWeight(5);
    curveVertex(points[0].x,points[0].y)
    curveVertex(points[0].x,points[0].y) 

  

    // Draw line
    points.forEach(function(p){

        curveVertex(p.x,p.y);

    })
    vertex(points[points.length-1].x,points[points.length-1].y)  // Duplicate ending point
    endShape()
 }
  
    // Draw points for visualization
    stroke('#ff9900')
    strokeWeight(10)
    // points.push({x: x, y: y})
    points.forEach(function(p){
        point(p.x, p.y)
      
    })
  
}

I tried creating a class and passed the points array to it, thinking that the matter.vertices function would take the points and make the needed body for the falling balls to bounce off. The code does not throw an error, but no collision occurs with the line. The example provided in matter.js document for the vertices function is unavailable and I have been unable to find any examples online. Hoping someone can point me in the right direction to get the created line to interact with the falling balls.

class Line {
  constructor(vertices) {
    let options = {
      friction:0,
      restitution: 0.95,
      // angle: a,
      isStatic: true
    }
    this.body = Matter.Body.create(options);
    this.v = Matter.Vertices.create(vertices, this.body)
    World.add(world, this.body);
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source