fillText not rendering correctly on Azure Windows deployed api app

[mpalmahsf]

Experiencing an issue with fillText when deployed to Azure Windows api app container.

When testing locally I get this:

When deployed to Azure api app I get this

  registerFont(join(__dirname, '../assets/fonts/Helvetica.ttf'), { family: 'Helvetica' })  

  const canvas = createCanvas(280, 80)
  const context = canvas.getContext("2d")
  context.clearRect(0, 0, canvas.width, canvas.height)

  // draw button
  context.beginPath()
  context.roundRect(10, 10, 260, 60, [5])
  context.fillStyle = "#dd2111"
  context.fill();

  const fontSize = process.env.CANVAS_FONT_SIZE || '20';
  context.font = `${fontSize}px "Helvetica"`
  context.textAlign = "center"
  context.textBaseline = "middle";
  context.fillStyle = "#fff"
  context.fillText(askAmountText, canvas.width/2, canvas.height/2)

  const imageBuffer = await canvas.toBuffer("image/png")
  return imageBuffer

The characters appears to be stacked on top of each other. I tried setting with a lower font size and the attached image is the result. Hope there is a solution and I don't have to move to a VM or redeploy to a Linux container.

Azure Environment node version v16.16.0 C:\home\site\wwwroot `-- canvas@2.10.2

[zbjornson]

Not a solution, but there are some other font-related issues on Azure that no one figured out (#857). Using a Linux container is probably a good option.