How do I get this array of circles to appear within the boundary of a parallelogram?

I understand how to get an array of circles to appear within a given square space, but how do I get them to appear within irregular shaped spaces. I have a parallelogram outlined that defines the boundaries of where I am trying to get the circles to appear, but no idea how to achieve this. Thanks!

Code from p5.js:

let circles = [];

function setup() {
  createCanvas(1200, 1200);
  colorMode(HSB,360,100,100,1);
  
  
  for (let i = 0; i < 500; i++) {
    x = random(400, 800);
    y = random(400, 800);
    d = 10;
    circles[i] = new circleClass(x, y, d);
  }
}


function draw() {
  
  background(35,13,90,1);
  
  noLoop();

  for (let i = 0; i < circles.length; i++) {
    circles[i].show();
  }
  
  
  noFill();
  stroke(0);
  quad(400,600,800,200,800,600,400,1000);
  
}



class circleClass {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
  }
  show() {
    noStroke();
    fill(27, 71, 73, 1);
    ellipse(this.x, this.y, this.d);
  }
}