[p5.js 2.0 Bug Report]: textToContours() results are browser dependent

[inaridarkfox4231]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.5

Web browser and version

Chrome, Firefox

Operating system

Windows

Steps to reproduce this

Steps:

1. use textToContours at Chrome and Firefox.
2. Centering is successful in Chrome.
3. Centering is failure in Firefox.

Snippet:

textToContours bug

async function setup() {
  createCanvas(400, 400);
  font = await loadFont('https://inaridarkfox4231.github.io/assets/KosugiMaru-Regular.ttf');
  textAlign(CENTER,CENTER);
  textSize(280);
  const contours = font.textToContours('海', width/2, height/2, { sampleFactor: 0.5 });

  background(220);
  const ctx = drawingContext;
  ctx.fillStyle = "blue";
  drawContours(contours, ctx);
}

function drawContours(contours, ctx){
  ctx.beginPath();
  for(const contour of contours){
    for(let k=0; k<contour.length; k++){
      if(k===0){
        ctx.moveTo(contour[0].x, contour[0].y);
      }else{
        ctx.lineTo(contour[k].x, contour[k].y);
      }
    }
    ctx.lineTo(contour[0].x, contour[0].y);
  }
  ctx.closePath();
  ctx.fill();
}

Microsoft Edge

Firefox

[inaridarkfox4231]

Easy to understand comparison.

let font;

async function setup() {
  createCanvas(100, 100);
  font = await loadFont('https://inaridarkfox4231.github.io/assets/KosugiMaru-Regular.ttf');
}

function draw() {
  background(200);
  textAlign(CENTER, CENTER);
  textSize(65);

  // Get the point array.
  let contours = font.textToContours('海', width/2, height/2, { sampleFactor: 0.5 });

  beginShape();
  for (const pts of contours) {
    beginContour();
    for (const pt of pts) {
      vertex(pt.x, pt.y);
    }
    endContour(CLOSE);
  }
  endShape();

  describe('The text p5*js wobbling over time');
}

left: Waterfox.
right: Microsoft Edge.

I omitted the parts where the text moves because it would be difficult to understand.

[davepagurek]

Just stepped through this example in chrome and firefox to see where they differ. Looks like it's at this line:

p5.js/src/type/p5.Font.js

Lines 774 to 775 in 53c12c3

	let metrics = this._measureTextDefault(renderer, 'X');
	let ascent = metrics.fontBoundingBoxAscent;

Firefox reports the ascent as 51; Chrome reports it as 60. This is coming from here:

p5.js/src/type/p5.Font.js

Line 902 in 53c12c3

let metrics = ctx.measureText(str);

Previously we read this from the parsed font file rather than through the browser, but that also lead to slightly different values than when you rendered text with the font name on the canvas compared to through p5. So ideally, we figure out how to make measureText behave consistently rather than falling back to reading this value from elsewhere, but we do always have that option too.

Some further debugging, in case anyone has time before me:

• Is this only for some fonts?
• Is this only for some characters in some fonts?
• If so, is there anything weird/nonstandard about how those characters are represented in the font? That might give some hints about why they're being interpreted differently and what we might be able to set explicitly to accommodate