move webgl background(image) handling to renderergl

Author: reshma045

src/color/setting.js

@@ -666,34 +666,6 @@ 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;
 };

src/webgl/p5.RendererGL.js

@@ -934,6 +934,30 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
  * [background description]
  */
   background(...args) {
+    const a0 = args[0];
+
+    const isImageLike =
+      a0 instanceof p5.Image ||
+      a0 instanceof p5.Graphics ||
+      (typeof HTMLImageElement !== 'undefined' && a0 instanceof HTMLImageElement) ||
+      (typeof HTMLVideoElement !== 'undefined' && a0 instanceof HTMLVideoElement) ||
+      (typeof p5.MediaElement !== 'undefined' && a0 instanceof p5.MediaElement);
+
+    // WEBGL: support background(image)
+    if (args.length > 0 && isImageLike) {
+      // Clear WebGL buffers (color + depth)
+      this._pInst.clear();
+
+      // Draw background image in screen space (ignore camera)
+      this._pInst.push();
+      this._pInst.resetMatrix();
+      this._pInst.imageMode(this._pInst.CENTER);
+      this._pInst.image(a0, 0, 0, this._pInst.width, this._pInst.height);
+      this._pInst.pop();
+      return;
+    }
+
+    // Default WEBGL background(color)
     const _col = this._pInst.color(...args);
     const _r = _col.levels[0] / 255;
     const _g = _col.levels[1] / 255;