如何在p5js中用图像填充多个自定义形状

Question

我想对多个图像使用遮罩，但无法使它正常工作。我正在尝试创建下面的图片。我有要使用的图像而不是颜色。我为棕色部分创建了一个自定义形状，并在其中填充了图像（使用蒙版）。我尝试对眼睛进行同样的操作，只是覆盖了棕色部分，但是有些不正确（下面的输出）。显然，我不太了解事情的运作方式。

我的草图如下。任何指针，我将不胜感激。

var blueFleece;
var brownFleece

function preload() {
    blueFleece = loadImage("https://www.onlinefabricstore.net/images/product-images/xl/121713_1.jpg");
    brownFleece = loadImage("https://images.fabric.com/images/400/400/0441363.jpg");
}



function setup() {
    createCanvas(1200, 1200);
    background('bisque');
    noLoop()
}

function draw() {

    
// Create top of head shape
  topOfHead = createGraphics(900, 600);
    topOfHead.vertex(150,  0);
    topOfHead.vertex(150,300);
    topOfHead.vertex(  0,450);
    topOfHead.vertex(150,600);
    topOfHead.vertex(300,450);
    topOfHead.vertex(600,450);
    topOfHead.vertex(750,600);
    topOfHead.vertex(900,450);
    topOfHead.vertex(750,300);
    topOfHead.vertex(750,  0);
    topOfHead.vertex(600,150);
    topOfHead.vertex(300,150);
    topOfHead.endShape(CLOSE);
// Use the shape as a mask for the image
  brownFleece.mask(topOfHead)
// Place the masked image at (0,0)
 image(brownFleece, 0, 0, 900,600)
    
// Create eye shape
    eye = createGraphics(150, 150);
  eye.vertex(75,0);
    eye.vertex(0,75);
    eye.vertex(75,150);
    eye.vertex(150,75);
    eye.endShape(CLOSE);
    blueFleece.mask(eye);
// Place the eye at (225,300)
  image(blueFleece, 225,300, 150,150)

}

谢谢。