​

let g1;

let g2;

​

function setup() {

  createCanvas(900, 400);

​

}

​

function draw() {

  background(220);

  // Text Mask (White is passthrough, black is blocked)

  g1 = createGraphics(width, height);

  g1.background(0);

  g1.stroke(255);

  g1.textSize(250);

  g1.strokeWeight(4);

  g1.textStyle(BOLD);

  g1.text("G H D", width/2-340, height/2+80);

  // background graphic (moving blobs)

  g2 = createGraphics(width, height);

  g2.background(255, 255); // Blue with some transparency

  g2.fill("red")

  g2.noStroke();

  g2.rect(mouseX, mouseY, 110, 200);

​

  // merge 2 graphics

  image(g2, 0, 0);

  blendMode(MULTIPLY);

  image(g1, 0, 0);

  blendMode(BLEND); // Reset to default

}