Measure badge widths using canvas

[ghostdevv]

Yeah, my assumptions were flawed - I thought it would be about the whole canvas not being available, but I made some further tests real quick.

So, @napi-rs/canvas & canvasContext generally are available, but if I'm not missing anything major, it's producing 0 widths because Geist as a font is not available on the Vercel serverless function (my assumption based on the testing).

function measureTextWidth(text: string, font: string): number | null {
  const context = getCanvasContext()

  if (context) {
    context.font = font

    const measuredWidth = context.measureText(text).width

    if (Number.isFinite(measuredWidth) && measuredWidth > 0) { // Returns false as font not available and nothing can be measured
      return Math.ceil(measuredWidth)
    }
  }

  return null // yields null for canvas context and then falls back to estimateTextWidth 
}

So it's rather: use pre-measured widths for a lookup table rather than use table for badges when canvas not available

Originally posted by @t128n in #2487 (comment)