Camera functions after a push() when drawing to a framebuffer flip the canvas

[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

1.7.0

Web browser and version

Firefox 117

Operating System

macOS 14.0

Steps to reproduce this

Steps:

1. Create a framebuffer
2. Draw something to the famebuffer inside begin/end, and with a camera function like ortho, then draw that to the screen. e.g.:

   let fbo
   function setup() {
     createCanvas(400, 400, WEBGL)
     fbo = createFramebuffer()
   }
   
   function draw() {
     fbo.begin()
     background(100)
     ortho(-width/2, width/2, -height/2, height/2, 0.1, 2000)
     translate(0, -100)
     box()
     fbo.end()
     
     imageMode(CENTER)
     image(fbo, 0, 0)
   }

   So far, this should look correct:
   
3. Then, add a push/pop around the camera call:

     function draw() {
       fbo.begin()
       background(100)
   +   push()
       ortho(-width/2, width/2, -height/2, height/2, 0.1, 2000)
       translate(0, -100)
       box()
   +   pop()
       fbo.end()
       
       imageMode(CENTER)
       image(fbo, 0, 0)
     }

   Now, the camera is flipped:
   

Live: https://editor.p5js.org/davepagurek/sketches/GMWJ1-n9n