[p5.js 2.0+ Bug Report]: Text weight performance worse than other font properties, like size

[davepagurek]

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

2.2.3

Web browser and version

Chrome 147, Firefox 149

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. Load a variable font
2. In a loop, draw stuff with different font weights

The frame rate is much lower for me when changing font weight compared to font size. E.g. in the test sketch below, on Chrome I get 8fps with textWeight vs 60 for textSize; on Firefox I get 30fps vs 60.

Snippet:

// noprotect

let font
let fpss = []
let fpsDisplay
async function setup() {
  createCanvas(400, 400);
  font = await loadFont("https://fonts.gstatic.com/s/roboto/v47/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf")
  fpsDisplay = createP()
}

function draw() {
  background(220);
  textAlign(CENTER)
  textSize(10)
  noStroke()
  fill('red')
  textFont(font)
  
  const t = millis()
  const n = 40
  for (let x = 0; x < n; x++) {
    for (let y = 0; y < n; y++) {
      // textSize(sin(t * 0.02 + x*0.3 + y*0.5) * 5 + 10)
      textWeight(sin(t * 0.02 + x*0.3 + y*0.5) * 200 + 400);
      text(
        'a',
        map(x+0.5, 0, n, 0, width),
        map(y+0.5, 0, n, 0, height)
      )
    }
  }
  
  fpss.push(frameRate())
  if (fpss.length > 20) fpss.shift()
  fpsDisplay.html(round(fpss.reduce((acc, next) => acc+next, 0)/fpss.length))
}

Live: https://editor.p5js.org/davepagurek/sketches/CXLojxA8A