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
• 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:

p5.js/src/webgl/p5.Camera.js

Lines 2242 to 2246 in f62fc6d

	ortho(left, right, bottom, top, near, far) {
	if (left === undefined) left = -this._renderer.width / 2;
	if (right === undefined) right = +this._renderer.width / 2;
	if (bottom === undefined) bottom = -this._renderer.height / 2;
	if (top === undefined) top = +this._renderer.height / 2;

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