[p5.js 2.0+ Bug Report]: WebGPU text() doesn't work in Firefox
Open
@avinxshKD is already working on this.
Since May 10, 2026.
p5.js 2.0+
- Dominant language
- JavaScript
- Stars
- 24k
- Forks
- 3.8k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 25
Description
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
dev-2.0
Web browser and version
Firefox 148
Operating system
MacOS 15.2
Steps to reproduce this
Steps:
- Load a font in WEBGPU mode
- Draw text with the font
In Chrome, this works, but in Firefox, I get this error:
TypeError: GPUQueue.copyExternalImageToTexture: 'source' member of GPUCopyExternalImageSourceInfo could not be converted to any of: ImageBitmap, HTMLImageElement, HTMLCanvasElement, OffscreenCanvas.
at uploadTextureFromSource (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.webgpu.js:7110:20)
at init (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:66860:24)
at Texture (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:66738:12)
at getTexture (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:54764:19)
at updateUniformValue (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.webgpu.js:7081:51)
at setUniform (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:61212:22)
at text/Renderer3D.prototype._renderText (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:122569:16)
at textCore/Renderer.prototype.text/< (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51930:34)
at textCore/Renderer.prototype.text (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51930:13)
at textCore/</fn[func] (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:51879:36)
at validateParams/</< (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:91428:29)
at draw (/sketch.js:13:7)
at structure/fn.redraw (https://raw.esm.sh/pr/p5@6d4a9fa/lib/p5.js:3574:27)
Snippet:
let font
async function setup() {
font = await loadFont('https://fonts.gstatic.com/s/ebgaramond/v32/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QI96WamXgXFI.ttf')
await createCanvas(400, 400, WEBGPU);
}
function draw() {
background(0)
textFont(font)
textSize(100)
textAlign(CENTER, CENTER)
fill(255)
text('WebGPU', 0, 0)
}
Live: https://editor.p5js.org/davepagurek/sketches/eJbmJQUZy
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.