Is it possible to erase part of an object and let the background show through?

p5.js Beginners
1

Is it possible to erase part of an object such as a rectangle or ellipse and allow the background color to show through? In the example I’ve got the background set to a gradient and am attempting to erase two rectangles from a red ellipse. The “erase()” function apparently erases everything, including the background color.

let c1,c2;

function setup() {
createCanvas(windowWidth, windowHeight);
  c1 = color(255);
  c2 = color(63, 191, 191);
  
  for(let y=0; y<height; y++){
    n = map(y,0,height,0,1);
    let newc = lerpColor(c1,c2,n);
    stroke(newc);
    line(0,y,width, y);
  }
  
}


function draw() {
 fill(255, 0, 0);
ellipse(150,150,200,200);
erase();
rect(160,160,20,20);
rect(180,180,50,50);
noErase();
}
2

Hi! As you said erase erases even the background (there is no sense of layers in canvas). So you need to createGraphics to make them into separate layers
https://editor.p5js.org/micuat/sketches/gpPX-gmav

3

Awesome! Thank you so much!