When is migrating to WEBGL justified for heavy pixel-array work in p5.js?

Goal: Determine whether the default 2D renderer’s loadPixels()/pixels[] workflow is causing a measurable draw‑loop bottleneck before attempting any optimization, using frameRate() to monitor FPS and timing the pixel‑array access versus other draw() logic.

Uncertainty: The decision to stay with the 2D canvas or migrate to the WEBGL renderer with a custom shader involves trade‑offs such as pixelDensity scaling, version‑specific pixels[] layout, and the overhead of setting up shaders, yet the library offers no clear rule for when the migration cost pays off.

Specific questions: Does measuring frameRate() inside draw() reliably reveal a pixel‑array bottleneck at typical canvas sizes? Which thresholds of frameRate drop or pixel‑array length justify switching to WEBGL and createShader()? How can I isolate the pixel‑array work from other calculations to confirm the source of slowdown without adding profiling overhead?