createCanvas(400, 400, WEBGL);

  b = createFramebuffer()

  background(0);

  b.begin()

    fill(255,0,0)

    noStroke()

    rect(-100,-100,200,200)

​

    erase()

    circle(0,0,100)

    noErase()

    fill(0,255,0)

    noStroke()

    rect(-100,-100,50,50)

  erase()

    circle(100,100,100)

    noErase()

  fill(0,255,0)

    noStroke()

    rect(100,100,50,50)

  b.end()

  image(b,-200,-200)

}

​

const constants = {

  REMOVE: 'destination-out',

}

​

p5.RendererGL.prototype.erase = function(opacityFill, opacityStroke) {

  if (!this._isErasing) {

      this._cachedBlendMode = this.curBlendMode;

      this._isErasing = true;

      this.blendMode(constants.REMOVE);

      this._cachedFillStyle = this.curFillColor.slice();

      this.curFillColor = [1, 1, 1, opacityFill / 255];

      this._cachedStrokeStyle = this.curStrokeColor.slice();

      this.curStrokeColor = [1, 1, 1, opacityStroke / 255];

  }

}

p5.RendererGL.prototype.noErase = function() {

  if (this._isErasing) {    

      this.curFillColor = this._cachedFillStyle.slice();

      this.curStrokeColor = this._cachedStrokeStyle.slice();

      // It's necessary to restore post-erase state. Needs rework

      let temp = this.curBlendMode;

      this.blendMode(this._cachedBlendMode);

      this._cachedBlendMode = temp; // If we don't do this, applyBlendMode() returns null

      this._isErasing = false;

      this._applyBlendMode(); // This sets _cachedBlendMode back to the original blendmode

  }

}