How to use BLENDMODE masking to make graphical images fill black or white regions of the image?

p5.js Coding Questions
1

I am using P5JS to draw multiple ellipse locations in an image. The background is black and all circles drawn are white.

I’d like to figure out how to use image1 to replace all black areas and image2 to replace all white areas in the image.

Any ideas on how to do that? Example black/white image and example final desired output is attached.

Below is the same code used to generate the black/white example image, but I can’t seem to figure out how to set the blendMode values properly to make the output possible?

example-both

var backgroundImage1;
var foregroundImage2;

function preload() {
    backgroundImage1 = loadImage("example1.png");
    foregroundImage2 = loadImage("example2.png");
}

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

function draw() {

    background(0);

    background(backgroundImage1);
    blendMode(BLEND); //https://www.geeksforgeeks.org/p5-js-blendmode-function/

    background(foregroundImage2);
    blendMode(MULTIPLY); //https://www.geeksforgeeks.org/p5-js-blendmode-function/


    drawCircle1();
    drawCircle2();
    drawCircle3();
    
    noLoop();
}

function drawCircle1() {
    ellipseMode(CENTER);
    fill("#ffffff");**strong text**
    stroke(0, 0, 0);
    ellipse(400, 400, 300, 300);
}
function drawCircle2() {
    ellipseMode(CENTER);
    fill("#ffffff");
    stroke(255, 255, 255);
    ellipse(250, 250, 200, 200);
}
function drawCircle3() {
    ellipseMode(CENTER);
    fill("#ffffff");
    stroke(255, 255, 255);
    ellipse(250, 450, 100, 100);
}