clip() on a framebuffer while there is a clip() on the main canvas invalidates the main canvas's clip

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

main branch

Web browser and version

Firefox 114

Operating System

MacOS 12.5.1

Steps to reproduce this

Steps:

1. Make a WebGL canvas
2. Make a framebuffer
3. Add a clip to the main canvas
4. Between the framebuffer's begin/end, apply a different clip
5. After the end of the framebuffer, draw something else to the main canvas

After (5), the main canvas's clip is no longer active. We intentionally only support one clip at a time per draw target for now (because saving + restoring a stencil buffer might be slow) but we should be able to support switching between framebuffers like this.

Snippet:

let fbo

function setup() {
  createCanvas(400, 400, WEBGL)
  fbo = createFramebuffer()
  noLoop()
}

function draw() {
  rectMode(CENTER)
  background('red')
  push()
  beginClip()
  rect(-25, -25, 100, 100)
  endClip()
  
  fbo.begin()
  beginClip()
  rect(25, 25, 100, 100)
  endClip()
  fill('blue')
  rect(0, 0, width, height)
  fbo.end()
  
  imageMode(CENTER)
  image(fbo, 0, 0)
  pop()
  
  // Visualize outlines of masks
  noFill()
  rect(-25, -25, 100, 100)
  rect(25, 25, 100, 100)
}

Live: https://editor.p5js.org/davepagurek/sketches/ZfeKjEE0I

Expected:

Actual: