Get text width

get-text-width.ts

export function getTextWidth(text: string, element: HTMLElement): number {
  const canvas = document.createElement('canvas');

  const context = canvas.getContext('2d');
  if (!context) return 0;

  const fontWeight = getCssStyle(element, 'font-weight') || 'normal';
  const fontSize = getCssStyle(element, 'font-size') || '14px';
  const fontFamily = getCssStyle(element, 'font-family') || 'Times New Roman';
  const font = `${fontWeight} ${fontSize} ${fontFamily}`;

  context.font = font;
  const metrics = context.measureText(text);

  canvas.remove();

  return metrics.width;
}

function getCssStyle(element: HTMLElement, prop: string) {
  return window.getComputedStyle(element, null).getPropertyValue(prop);
}