[p5.js 2.0+ Bug Report]: ReferenceError: p5 is not defined when calling loadPixels/get/copy/mask on p5.MediaElement in ESM

Most appropriate sub-area of p5.js?

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

p5.js version

v2.3.3 (also affects v2.0.0 through v2.3.2)

Web browser and version

All modern browsers (Chrome 128+, Firefox 129+, Safari 17+) in ESM environments

Operating system

macOS / Linux / Windows

Steps to reproduce this

Steps:

1. Create a modern web project using Vite/Webpack or native ES module imports (import p5 from 'p5').
2. Create a p5.MediaElement (for example using createCapture(VIDEO) or createVideo()).
3. Call video.loadPixels(), video.get(), video.copy(), or video.mask().
4. Observe an uncaught ReferenceError: p5 is not defined thrown in console, breaking the animation/render loop.

Snippet:

import p5 from 'p5';

new p5((sketch) => {
  let video;

  sketch.setup = () => {
    sketch.noCanvas();
    video = sketch.createCapture(sketch.VIDEO);
    video.size(160, 120);
  };

  sketch.draw = () => {
    // Throws Uncaught ReferenceError: p5 is not defined
    video.loadPixels();
  };
});

Errors

p5.MediaElement.js:776:5
Uncaught (in promise) ReferenceError: p5 is not defined
    at loadPixels (p5.MediaElement.js:776:12)
    at sketch.draw (sketch.js:14:11)

Additional Notes

Root Cause:

In src/dom/p5.MediaElement.js:

• p5 is never imported at the top of the file.
• Lines 776, 782, 789, 793, 800, 806, 811 directly access p5 as a global identifier:
  • p5.Renderer2D.prototype.loadPixels.apply(this, args)
  • p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h)
  • p5.Renderer2D.prototype.get.apply(this, args)
  • p5.Renderer2D.prototype._getPixel.apply(this, args)
  • p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol)
  • p5.prototype.copy.apply(this, args)
  • p5.Image.prototype.mask.apply(this, args)

In standard ES module bundlers where window.p5 is not globally assigned, every one of these methods crashes immediately.

Minimal Node ESM Repro:

import p5Module from 'p5';
const p5 = p5Module.default;

const mockElement = {
  _ensureCanvas: () => {},
  setModified: () => {},
  loadPixels: p5.MediaElement.prototype.loadPixels
};

// Crashes with: ReferenceError: p5 is not defined
p5.MediaElement.prototype.loadPixels.call(mockElement);

Start in src/dom/p5.MediaElement.js at the loadPixels, updatePixels, get, _getPixel, set, copy, and mask methods identified in the report, then reproduce the failure with the provided ESM snippet. Verify the affected MediaElement methods no longer throw ReferenceError when used through an ESM import.