WebGL filters display at the wrong size when the rect mode is changed

[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.9.0

Web browser and version

Firefox 117

Operating System

MacOS 14

Steps to reproduce this

Steps:

1. Draw something
2. Change the rect mode to something non-default, e.g. CORNERS
3. Apply a filter, such as filter(BLUR, 10)

The resulting image is offset and scaled.

Note that in addition to fixing this, we should include new tests, since this area of the code is clearly pretty brittle to these environment changes, and it's infeasible to test them all manually.

Snippet:

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

function draw() {
  background(220)
  circle(0, 0, 100)
  // Comment this out to fix
  rectMode(CORNERS)
  filter(BLUR, 10)
}

https://editor.p5js.org/davepagurek/sketches/OFRDKVzm_

[perminder-17]

Ooh..Good catch... Setting the rect-mode of the canvas explicitly before drawing the image can may fix this I guess?

[Metamere]

Yes, that workaround fixes it. I asked Dave for help with this issue earlier today, and he submitted the bug report after figuring out the cause.