cam.ortho() on framebuffer cameras and no args uses the size from the main canvas

[davepagurek]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [X] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

1.9.3

Web browser and version

All

Operating system

All

Steps to reproduce this

Steps:

1. Create a framebuffer at a different size than the main canvas
2. Create a camera for it
3. Call ortho() on the camera
4. Draw something on the framebuffer
5. It gets scaled incorrectly

This is due to ortho() using the _renderer to get its width and height: https://github.com/processing/p5.js/blob/f62fc6d6c2725b144ba1fd138ad7658dc1457590/src/webgl/p5.Camera.js#L2242-L2246

p5.FramebufferCamera has a this.fbo property, so probably in ortho every instance of _renderer should be replaced with (this.fbo || this._renderer).

Snippet:

let fbo
let fboCam

function setup() {
  createCanvas(400, 400, WEBGL);
  fbo = createFramebuffer({ width: 200, height: 400 })
  push()
  fboCam = fbo.createCamera()
  pop()
  fboCam.ortho()
}

function draw() {
  background(220);
  fbo.draw(() => {
    setCamera(fboCam)
    rectMode(CENTER)
    rect(0, 0, fbo.width, fbo.height)
  })
  imageMode(CENTER)
  image(fbo, 0, 0)
}

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

Actual behaviour: the framebuffer has a white rectangle 1/4 of the width of the main canvas instead of 1/2:

Expected behaviour: the framebuffer has a white rectangle half the width of the main canvas