WEBGL background image bug

[saolda]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

1.4.0

Web browser and version

137.0.7151.104 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows

Steps to reproduce this

Steps:

1. Works fine without WEBGL turned on.

Snippet:

 function setup() {
        createCanvas(400, 400, WEBGL);
        //loadImage('./imgs/asteroidTexture.avif');
        test = new Test();
    }
    class Test{
        constructor(){
           this.background = './imgs/asteroidTexture.avif';
           this.loadedBackground = loadImage(this.background);
           background(this.loadedBackground);
        }
    }

Console: Error: [object Arguments]is not a valid color representation.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[ksen0]

Thanks for reporting! Tagging @RandomGamingDev, @aferriss, @davepagurek, @lukeplowden, @perminder-17 stewards here to help triage this bug

[davepagurek]

I think we never got around to supporting the background(image) overload in WebGL. I think maybe there are two approaches here:

• One is to not support it in WebGL -- we treat WebGL background a little differently already, as for performance reasons it doesn't blend with existing content when using a semi-transparent value like 2D mode does, so we could just document that the image overload is 2D only too.
• Another is to implement the image overload, maybe turning it into the equivalent of this behind the scenes:

  clear()
  push()
  imageMode(CENTER)
  image(img, 0, 0, width, height)
  pop()

Personally, I lean slightly towards the former? I think using image() directly instead of background() might make it clearer how to handle cases where the background image isn't the exact size of the canvas, as we have overloads to manage scaling, cropping, etc, so we maybe that's where we should be directing users? I don't have a strong opinion though, open to feedback!