createCanvas fails when target element is missing — slim build and hidden-tab loop decisions for a low-traffic sketch

Direct Resolution

The missing-parent error is a result of createCanvas() validating the DOM immediately upon execution; there is no built-in mechanism to defer attachment. To resolve this, you must ensure the target element exists before the sketch initializes. Regarding the slim build, a static symbol audit for sound and DOM APIs is the safest verification method. Finally, p5.js does not auto-pause the draw() loop on tab blur; using noLoop() within visibility handlers is the accepted pattern.

1. Resolving the Missing Parent Error

Confirmed Behavior: p5.js requires the parent element to be present in the DOM at the exact moment createCanvas() is called. If the script is in the <head> and the container is in the <body>, the lookup fails and the sketch halts.

Steps for Resolution:

• Defer Execution: Wrap your sketch initialization in a DOMContentLoaded listener or move the <script> tag to the end of the HTML body.
• Instance Mode: If using instance mode (new p5(sketch, container)), ensure the container element is defined before the constructor is called. Passing a string ID still requires that ID to exist in the DOM at that moment.

There is no documented p5.js API to create a canvas and attach it to a parent at a later time.

2. Auditing for Slim Build Compatibility

Confirmed Behavior: The official slim build (p5.min.js) excludes the p5.sound and p5.dom libraries. Core drawing and math functions remain intact.

Audit Process:

1. Static Symbol Search: Search your codebase for sound-related keywords: loadSound, play(), amplitude, fft, p5.SoundFile.
2. DOM API Search: Search for DOM manipulation helpers: createElement, createButton, createSlider, select, selectAll, createDiv.
3. Dependency Check: Verify if any third-party p5 plugins are used, as these may transitively depend on the excluded libraries.

If no matching symbols are found and the sketch functions in a staging environment using the slim build, the swap is safe.

3. Managing the Hidden-Tab Loop

Confirmed Behavior: p5.js does not provide a default pause policy for hidden tabs. The draw() loop and frameCount continue to increment unless explicitly stopped by the developer.

Accepted Pattern:

The standard approach is to use the visibilitychange event or p5's built-in window handlers to toggle the loop state:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    noLoop();
  } else {
    loop();
  }
});

// Alternatively, using p5 handlers:
function windowBlur() { noLoop(); }
function windowFocus() { loop(); }

Diagnostic Detail: Please confirm your p5.js version. While these behaviors are consistent in version 1.4+, significantly older versions may exhibit different error messaging or instance mode constraints.