Filter shaders applied to framebuffers with a different size than the main canvas are drawn at the wrong scale

[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.0 and 1.9.1

Web browser and version

Firefox 117

Operating system

MacOS 14.2.1

Steps to reproduce this

Steps:

1. Create a framebuffer that's a different size from the main canvas
2. Apply a filter shader to it
3. Do something to see the contents of the framebuffer (e.g. draw it to the main canvas or save it to an image) The framebuffer's contents have been scaled incorrectly. This is due to the fact that we're accidentally drawing images at the size of the renderer, not the size of the target, which might be different: https://github.com/processing/p5.js/blob/3d45ce9b130a007668bfac7768fbcdd6b8ff41ec/src/webgl/p5.RendererGL.js#L1128-L1129

Snippet:

function setup() {
  createCanvas(400, 400, WEBGL);

  const fbo = createFramebuffer({ width: 200, height: 200, density: 1 })
  fbo.draw(() => {
    background(0)
    fill(255)
    circle(0, 0, 125)
    // Try commenting this out
    filter(GRAY)
  })

  background('red')
  imageMode(CENTER)
  image(fbo, 0, 0, fbo.width, fbo.height)
}

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