如何在p5.js中填充由线条组成的形状？

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  fill(255, 0, 0); // 设置填充颜色为红色
  
  beginShape();
  vertex(100, 100);
  vertex(200, 100);
  vertex(200, 200);
  vertex(100, 200);
  endShape(CLOSE);
  
  fill(0, 0, 255); // 设置填充颜色为蓝色
  
  beginShape();
  vertex(150, 150);
  vertex(250, 150);
  vertex(250, 250);
  vertex(150, 250);
  endShape(CLOSE);
  
  fill(0, 255, 0); // 设置填充颜色为绿色
  
  beginShape();
  vertex(120, 120);
  vertex(180, 120);
  vertex(180, 180);
  vertex(120, 180);
  endShape(CLOSE);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 绘制形状的边界线
  line(100, 100, 200, 100);
  line(200, 100, 200, 200);
  line(200, 200, 100, 200);
  line(100, 200, 100, 100);
  
  // 获取画布的像素数据
  loadPixels();
  
  // 遍历像素数据
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      // 判断像素点是否在形状内
      if (isInsideShape(x, y)) {
        // 设置像素点的颜色为红色
        set(x, y, color(255, 0, 0));
      }
    }
  }
  
  // 更新画布显示
  updatePixels();
}

// 判断像素点是否在形状内
function isInsideShape(x, y) {
  if (x >= 100 && x <= 200 && y >= 100 && y <= 200) {
    return true;
  } else {
    return false;
  }
}