processing / processing/p5.js

[p5.js 2.0+ Bug Report]: WebGPU text() doesn't work in Firefox

Open
#8,703 6 comments 0 reactions 1 assignee View on GitHub

@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:
  1. Load a font in WEBGPU mode
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.