fix background(image) support in WEBGL #7917

Author: reshma045

src/color/setting.js

@@ -666,6 +666,34 @@ p5.prototype.clip = function(callback, options) {
  * @chainable
  */
 p5.prototype.background = function(...args) {
+
+  // WEBGL: support background(image)
+  if (this._renderer && this._renderer.isP3D && args.length > 0) {
+    const img = args[0];
+
+    const isImageLike =
+      img instanceof p5.Image ||
+      img instanceof p5.Graphics ||
+      (typeof HTMLImageElement !== 'undefined' && img instanceof HTMLImageElement) ||
+      (typeof HTMLVideoElement !== 'undefined' && img instanceof HTMLVideoElement) ||
+      (typeof p5.MediaElement !== 'undefined' && img instanceof p5.MediaElement);
+
+    if (isImageLike) {
+      // Clear WebGL buffers
+      this.clear();
+
+      // Draw image in screen space
+      this.push();
+      this.resetMatrix();
+      this.imageMode(this.CENTER);
+      this.image(img, 0, 0, this.width, this.height);
+      this.pop();
+
+      return this;
+    }
+  }
+
+  // Default behavior (2D + color backgrounds)
   this._renderer.background(...args);
   return this;
 };

test/unit/color/setting.js

@@ -163,6 +163,17 @@ suite('color/Setting', function() {
     });
   });
 
+  suite('p5.prototype.background (WEBGL)', function() {
+    test('does not throw when given an image-like argument', function() {
+      const g = my3D.createGraphics(32, 32);
+      g.background(255, 0, 0);
+
+      assert.doesNotThrow(function() {
+        my3D.background(g);
+      });
+    });
+  });
+
   suite('p5.prototype.colorMode', function() {
     test('should be a function', function() {
       assert.ok(myp5.colorMode);