diff --git a/lib/empty-example/index.html b/lib/empty-example/index.html
index 56c88a89b8..54b1bfdfe2 100644
--- a/lib/empty-example/index.html
+++ b/lib/empty-example/index.html
@@ -12,7 +12,7 @@
background-color: #1b1b1b;
}
-
+
diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js
index 42fdaa496b..204f489bdd 100644
--- a/src/core/p5.Graphics.js
+++ b/src/core/p5.Graphics.js
@@ -30,7 +30,7 @@ class Graphics {
const r = renderer || constants.P2D;
this._pInst = pInst;
- this._renderer = new renderers[r](this._pInst, w, h, false, canvas);
+ this._renderer = new renderers[r](this, w, h, false, canvas);
this._initializeInstanceVariables(this);
diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js
index 4f3bcc70fb..18573da7f5 100644
--- a/src/core/p5.Renderer.js
+++ b/src/core/p5.Renderer.js
@@ -4,6 +4,16 @@
* @for p5
*/
+/**
+ * `pInst` may be:
+ *
+ * The main sketch-wide `p5` instance (global canvas), or
+ * an off-screen `p5.Graphics` wrapper.
+ *
+ * Therefore a renderer must only call properties / methods that exist
+ * on both objects.
+ */
+
import { Color } from '../color/p5.Color';
import * as constants from '../core/constants';
import { Image } from '../image/p5.Image';
diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index 23f74bec4b..f48716739f 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -75,7 +75,6 @@ class Renderer2D extends Renderer {
}
// Set and return p5.Element
this.wrappedElt = new Element(this.elt, this._pInst);
-
this.clipPath = null;
}
@@ -178,9 +177,10 @@ class Renderer2D extends Renderer {
// create background rect
const color = this._pInst.color(...args);
- //accessible Outputs
- if (this._pInst._addAccsOutput()) {
- this._pInst._accsBackground(color._getRGBA([255, 255, 255, 255]));
+ // Add accessible outputs if the method exists; on success,
+ // set the accessible output background to white.
+ if (this._pInst._addAccsOutput?.()) {
+ this._pInst._accsBackground?.(color._getRGBA([255, 255, 255, 255]));
}
const newFill = color.toString();
@@ -211,9 +211,10 @@ class Renderer2D extends Renderer {
const color = this.states.fillColor;
this._setFill(color.toString());
- //accessible Outputs
- if (this._pInst._addAccsOutput()) {
- this._pInst._accsCanvasColors('fill', color._getRGBA([255, 255, 255, 255]));
+ // Add accessible outputs if the method exists; on success,
+ // set the accessible output background to white.
+ if (this._pInst._addAccsOutput?.()) {
+ this._pInst._accsCanvasColors?.('fill', color._getRGBA([255, 255, 255, 255]));
}
}
@@ -222,9 +223,10 @@ class Renderer2D extends Renderer {
const color = this.states.strokeColor;
this._setStroke(color.toString());
- //accessible Outputs
- if (this._pInst._addAccsOutput()) {
- this._pInst._accsCanvasColors('stroke', color._getRGBA([255, 255, 255, 255]));
+ // Add accessible outputs if the method exists; on success,
+ // set the accessible output background to white.
+ if (this._pInst._addAccsOutput?.()) {
+ this._pInst._accsCanvasColors?.('stroke', color._getRGBA([255, 255, 255, 255]));
}
}
diff --git a/src/dom/p5.Element.js b/src/dom/p5.Element.js
index c7eaf26e32..0265a64c42 100644
--- a/src/dom/p5.Element.js
+++ b/src/dom/p5.Element.js
@@ -63,11 +63,27 @@ class Element {
}
}
- // delete the reference in this._pInst._elements
- const index = this._pInst._elements.indexOf(this);
- if (index !== -1) {
- this._pInst._elements.splice(index, 1);
+ // `this._pInst` is usually the p5 “sketch” object that owns the global
+ // `_elements` array. But when an element lives inside an off-screen
+ // `p5.Graphics` layer, `this._pInst` is that wrapper Graphics object
+ // instead. The wrapper keeps a back–pointer (`_pInst`) to the real
+ // sketch but has no `_elements` array of its own.
+
+ let sketch = this._pInst;
+
+ // If `sketch` doesn’t own an `_elements` array it means
+ // we’re still at the graphics-layer “wrapper”.
+ // Jump one level up to the real p5 sketch stored in sketch._pInst.
+
+ if (sketch && !sketch._elements && sketch._pInst) {
+ sketch = sketch._pInst; // climb one level up
}
+
+ if (sketch && sketch._elements) { // only if the array exists
+ const i = sketch._elements.indexOf(this);
+ if (i !== -1) sketch._elements.splice(i, 1);
+ }
+
// deregister events
for (let ev in this._events) {