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

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

Start with the textToContours() call and the linked OpenProcessing reproduction, then compare its contour and centering results in Chrome and Firefox using the supplied font and snippet. Done means the same centered contour rendering is produced in both browsers.