'Image collage in p5js with custom masks

I'm trying to make a collage in p5.js using multiple images and masks. I wrote a simple test code for three images and circle-masks. The output should be three circles each filled with a different image. However, I only get one circle filled with the last image. Could anyone please help me?

let newImg, graphicsCanvas;

function setup() { 
  createCanvas(600, 600);
  noLoop();
} 

function draw() { 
  for (let i=0; i<3; i++) {
    newImg = loadImage(`images/${i}.png`, addImg);
  }
}

function addImg() {
  graphicsCanvas = createGraphics(width, height);
  graphicsCanvas.noStroke();
  graphicsCanvas.fill(255);
  graphicsCanvas.circle(random(500), height/2, 150);
  newImg.mask(graphicsCanvas);
  image(newImg, 0, 0);
}


Sources

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

Source: Stack Overflow

Solution Source