Get the width for a single line of text

getTextWidth.js

/**
 * Get the width for a single line of text
 * @param {String} text - the string of text to be measured
 * @param {Object|HTMLElement} font - optional font styles or node to pull font styles from
 * @return {Number} the width of the text passed in
 */
const expando = 'text-width' + new Date().getTime()
const canvas =
  typeof document === 'undefined' ? null : document.createElement('canvas')
const context = canvas && canvas.getContext('2d')
const fontDefaults = {
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  fontSize: 'medium',
  fontFamily: 'sans-serif',
}

function getTextWidth(text, font) {
  if (!context) {
    return -1
  }
  if (font instanceof HTMLElement) {
    font = font[expando] || (font[expando] = getComputedStyle(font))
  } else {
    font = { ...fontDefaults, ...font }
  }
  context.font = [
    font.fontStyle,
    font.fontVariant,
    font.fontWeight,
    font.fontSize,
    font.fontFamily,
  ].join(' ')
  return context.measureText(text).width
}