@lightningtv/renderer 3.0.0-beta1 → 3.2.3

package/src/core/shaders/webgl/RoundedWithShadow.ts

@@ -1,20 +1,3 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
 import type { CoreNode } from '../../CoreNode.js';
 import { calcFactoredRadiusArray } from '../../lib/utils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
@@ -23,7 +6,6 @@ import {
   RoundedWithShadowTemplate,
   type RoundedWithShadowProps,
 } from '../templates/RoundedWithShadowTemplate.js';
-import { Shadow } from './Shadow.js';
 
 export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
   props: RoundedWithShadowTemplate.props,
@@ -32,36 +14,89 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
     this.uniform4fa('u_shadow', this.props!['shadow-projection']!);
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
-  vertex: Shadow.vertex as string,
-  fragment: `
+  vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
     # else
     precision mediump float;
     # endif
 
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
     uniform vec2 u_resolution;
     uniform float u_pixelRatio;
-    uniform float u_alpha;
     uniform vec2 u_dimensions;
-    uniform sampler2D u_texture;
 
-    uniform vec4 u_shadow_color;
     uniform vec4 u_shadow;
     uniform vec4 u_radius;
 
-    uniform int u_asymWidth;
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    varying vec2 v_boxUv;
+    varying vec2 v_boxSize;
+    varying vec2 v_boxSmooth;
+    varying vec2 v_shadowBox;
+    varying vec2 v_shadowSize;
+    varying vec4 v_shadowRadius;
+    varying vec2 v_shadowSmooth;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
+      vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+
+      vec2 padding = vec2(max(0.0, u_shadow.w) + u_shadow.z);
+      vec2 offsetShift = mix(min(vec2(0.0), u_shadow.xy), max(vec2(0.0), u_shadow.xy), (outerEdge + 1.0) * 0.5);
+      vec2 shadowEdge = outerEdge * padding + offsetShift;
+
+      vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+
+      v_color = a_color;
+      v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+
+      float edgeWidth = 1.0 / u_pixelRatio;
+      vec2 halfDimensions = u_dimensions * 0.5;
+
+      v_boxUv = (a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions)) * u_dimensions - halfDimensions;
+      v_boxSize = halfDimensions - edgeWidth;
+      v_boxSmooth = vec2(-0.5 * edgeWidth, 0.5 * edgeWidth);
+
+      v_shadowBox = v_boxUv - u_shadow.xy;
+      v_shadowSize = halfDimensions + u_shadow.w - edgeWidth;
+      v_shadowRadius = max(vec4(0.0), u_radius + u_shadow.w);
+      v_shadowSmooth = vec2(-u_shadow.z, u_shadow.z + 0.001);
+    }
+  `,
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform float u_alpha;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_shadow_color;
+    uniform vec4 u_radius;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
+
+    varying vec2 v_boxUv;
+    varying vec2 v_boxSize;
+    varying vec2 v_boxSmooth;
+    varying vec2 v_shadowBox;
+    varying vec2 v_shadowSize;
+    varying vec4 v_shadowRadius;
+    varying vec2 v_shadowSmooth;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -75,22 +110,21 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
       r.x = (p.y > 0.0) ? r.y : r.x;
       vec2 q = abs(p) - s + r.x;
       float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
-      return 1.0 - smoothstep(-(u_shadow.w), (u_shadow.w + u_shadow.z), dist);
+      return 1.0 - smoothstep(v_shadowSmooth.x, v_shadowSmooth.y, dist);
     }
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
-
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-
-      float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);
+      float boxDist = roundedBox(v_boxUv, v_boxSize, u_radius);
+      float roundedAlpha = 1.0 - smoothstep(v_boxSmooth.x, v_boxSmooth.y, boxDist);
 
       vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, u_shadow_color, shadowAlpha);
+      if (u_shadow_color.a > 0.0) {
+        float shadowAlpha = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
+        resColor = u_shadow_color * shadowAlpha;
+      }
+
       resColor = mix(resColor, color, min(color.a, roundedAlpha));
       gl_FragColor = resColor * u_alpha;
     }

package/src/core/shaders/webgl/SdfShader.ts

@@ -1,21 +1,3 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2023 Comcast Cable Communications Management, LLC.
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 
@@ -25,7 +7,6 @@ const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
  */
 export interface SdfShaderProps {
   transform: Float32Array;
-  scrollY: number;
   /**
    * Color in RGBA format
    *
@@ -35,7 +16,6 @@ export interface SdfShaderProps {
   color: number;
   size: number;
   distanceRange: number;
-  debug: boolean;
 }
 /**
  * SdfShader supports multi-channel and single-channel signed distance field textures.
@@ -53,22 +33,15 @@ export interface SdfShaderProps {
 export const Sdf: WebGlShaderType<SdfShaderProps> = {
   props: {
     transform: IDENTITY_MATRIX_3x3,
-    scrollY: 0,
     color: 0xffffffff,
     size: 16,
     distanceRange: 1.0,
-    debug: false,
   },
   onSdfBind(props) {
     this.uniformMatrix3fv('u_transform', props.transform);
-    this.uniform1f('u_scrollY', props.scrollY);
-    this.uniform4fv(
-      'u_color',
-      new Float32Array(getNormalizedRgbaComponents(props.color)),
-    );
+    this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
     this.uniform1f('u_size', props.size);
     this.uniform1f('u_distanceRange', props.distanceRange);
-    this.uniform1i('u_debug', props.debug ? 1 : 0);
   },
   vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -83,14 +56,15 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
     uniform vec2 u_resolution;
     uniform mat3 u_transform;
-    uniform float u_scrollY;
     uniform float u_pixelRatio;
     uniform float u_size;
+    uniform float u_distanceRange;
 
     varying vec2 v_texcoord;
+    varying float v_scaledDistRange;
 
     void main() {
-      vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+      vec2 scrolledPosition = a_position * u_size;
       vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
 
       // Calculate screen space with pixel ratio
@@ -98,7 +72,7 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
       gl_Position = vec4(screenSpace, 0.0, 1.0);
       v_texcoord = a_textureCoords;
-
+      v_scaledDistRange = u_distanceRange * u_pixelRatio;
     }
   `,
   fragment: `
@@ -109,24 +83,17 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
     # endif
     uniform vec4 u_color;
     uniform sampler2D u_texture;
-    uniform float u_distanceRange;
-    uniform float u_pixelRatio;
-    uniform int u_debug;
 
     varying vec2 v_texcoord;
+    varying float v_scaledDistRange;
 
     float median(float r, float g, float b) {
-        return max(min(r, g), min(max(r, g), b));
+        return clamp(b, min(r, g), max(r, g));
     }
 
     void main() {
         vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-        if (u_debug == 1) {
-          gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
-          return;
-        }
-        float scaledDistRange = u_distanceRange * u_pixelRatio;
-        float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
+        float sigDist = v_scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
         float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
 
         // Build the final color.

package/src/core/shaders/webgl/Shadow.ts

@@ -1,20 +1,3 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 import {
   ShadowTemplate,
@@ -41,28 +24,46 @@ export const Shadow: WebGlShaderType<ShadowProps> = {
 
     uniform vec2 u_resolution;
     uniform float u_pixelRatio;
-    uniform float u_rtt;
     uniform vec2 u_dimensions;
 
     uniform vec4 u_shadow;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
+
+    varying vec2 v_boxUv;
+    varying vec2 v_boxSize;
+    varying vec2 v_boxSmooth;
+    varying vec2 v_shadowBox;
+    varying vec2 v_shadowSize;
+    varying float v_shadowRadius;
+    varying vec2 v_shadowSmooth;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
       vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
 
-      vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
-      vec2 normVertexPos = a_position * u_pixelRatio;
+      vec2 padding = vec2(max(0.0, u_shadow.w) + u_shadow.z);
+      vec2 offsetShift = mix(min(vec2(0.0), u_shadow.xy), max(vec2(0.0), u_shadow.xy), (outerEdge + 1.0) * 0.5);
+      vec2 shadowEdge = outerEdge * padding + offsetShift;
 
       vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
       gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
 
       v_color = a_color;
-      v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
       v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+
+      float edgeWidth = 1.0 / u_pixelRatio;
+      vec2 halfDimensions = u_dimensions * 0.5;
+
+      v_boxUv = (a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions)) * u_dimensions - halfDimensions;
+      v_boxSize = halfDimensions - edgeWidth;
+      v_boxSmooth = vec2(0.0, edgeWidth);
+
+      v_shadowBox = v_boxUv - u_shadow.xy;
+      v_shadowSize = halfDimensions + u_shadow.w - edgeWidth;
+      v_shadowRadius = max(0.0, u_shadow.w);
+      v_shadowSmooth = vec2(-u_shadow.z, u_shadow.z + 0.001);
     }
   `,
   fragment: `
@@ -72,18 +73,21 @@ export const Shadow: WebGlShaderType<ShadowProps> = {
     precision mediump float;
     # endif
 
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
     uniform float u_alpha;
-    uniform vec2 u_dimensions;
     uniform sampler2D u_texture;
 
     uniform vec4 u_color;
-    uniform vec4 u_shadow;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
+
+    varying vec2 v_boxUv;
+    varying vec2 v_boxSize;
+    varying vec2 v_boxSmooth;
+    varying vec2 v_shadowBox;
+    varying vec2 v_shadowSize;
+    varying float v_shadowRadius;
+    varying vec2 v_shadowSmooth;
 
     float box(vec2 p, vec2 s) {
       vec2 q = abs(p) - s;
@@ -93,21 +97,21 @@ export const Shadow: WebGlShaderType<ShadowProps> = {
     float shadowBox(vec2 p, vec2 s, float r) {
       vec2 q = abs(p) - s + r;
       float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-      return 1.0 - smoothstep(-u_shadow.w, u_shadow.w + u_shadow.z, dist);
+      return 1.0 - smoothstep(v_shadowSmooth.x, v_shadowSmooth.y, dist);
     }
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
-
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = box(boxUv, halfDimensions);
 
-      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-      float shadowDist = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_shadow.z);
+      float boxDist = box(v_boxUv, v_boxSize);
+      float boxAlpha = 1.0 - smoothstep(v_boxSmooth.x, v_boxSmooth.y, boxDist);
 
       vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, u_color, shadowDist);
+      if (u_color.a > 0.0) {
+        float shadowDist = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
+        resColor = u_color * shadowDist;
+      }
+
       resColor = mix(resColor, color, min(color.a, boxAlpha));
       gl_FragColor = resColor * u_alpha;
     }

package/src/core/text-rendering/CanvasFontHandler.ts

@@ -0,0 +1,285 @@
+import type {
+  FontFamilyMap,
+  FontLoadOptions,
+  FontMetrics,
+  NormalizedFontMetrics,
+} from './TextRenderer.js';
+import type { Stage } from '../Stage.js';
+import { hasZeroWidthSpace } from './Utils.js';
+import type { CoreTextNode } from '../CoreTextNode.js';
+import { UpdateType } from '../CoreNode.js';
+import {
+  defaultFontMetrics,
+  normalizeFontMetrics,
+} from './TextLayoutEngine.js';
+
+interface CanvasFont {
+  fontFamily: string;
+  fontFace?: FontFace;
+  metrics?: FontMetrics;
+}
+
+/**
+ * Global font set regardless of if run in the main thread or a web worker
+ */
+// const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
+//   (resolvedGlobal as unknown as { fonts: FontFaceSet }).fonts) as FontFaceSet;
+
+// Global state variables for fontHandler
+const fontFamilies: Record<string, FontFace> = {};
+const fontLoadPromises = new Map<string, Promise<void>>();
+const normalizedMetrics = new Map<string, NormalizedFontMetrics>();
+const nodesWaitingForFont: Record<string, CoreTextNode[]> = Object.create(
+  null,
+) as Record<string, CoreTextNode[]>;
+
+const fontCache = new Map<string, CanvasFont>();
+
+let initialized = false;
+let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+let measureContext:
+  | CanvasRenderingContext2D
+  | OffscreenCanvasRenderingContext2D;
+
+/**
+ * Check if a font can be rendered
+ */
+export const canRenderFont = (): boolean => {
+  // Canvas can always render any font family (assuming the browser supports it)
+  return true;
+};
+
+const processFontData = (
+  fontFamily: string,
+  fontFace?: FontFace,
+  metrics?: FontMetrics,
+) => {
+  metrics = metrics || defaultFontMetrics;
+  fontCache.set(fontFamily, {
+    fontFamily,
+    fontFace,
+    metrics,
+  });
+};
+
+/**
+ * Load a font by providing fontFamily, fontUrl, and optional metrics
+ */
+export const loadFont = async (
+  stage: Stage,
+  options: FontLoadOptions,
+): Promise<void> => {
+  const { fontFamily, fontUrl, metrics } = options;
+
+  // If already loaded, return immediately
+  if (fontCache.has(fontFamily) === true) {
+    return;
+  }
+
+  const existingPromise = fontLoadPromises.get(fontFamily);
+  // If already loading, return the existing promise
+  if (existingPromise !== undefined) {
+    return existingPromise;
+  }
+
+  const nwff: CoreTextNode[] = (nodesWaitingForFont[fontFamily] = []);
+  // Create and store the loading promise
+  const loadPromise = new FontFace(fontFamily, `url(${fontUrl})`)
+    .load()
+    .then((loadedFont) => {
+      stage.platform.addFont(loadedFont);
+      processFontData(fontFamily, loadedFont, metrics);
+      fontLoadPromises.delete(fontFamily);
+      for (let key in nwff) {
+        nwff[key]!.setUpdateType(UpdateType.Local);
+      }
+      delete nodesWaitingForFont[fontFamily];
+    })
+    .catch((error) => {
+      fontLoadPromises.delete(fontFamily);
+      console.error(`Failed to load font: ${fontFamily}`, error);
+      throw error;
+    });
+
+  fontLoadPromises.set(fontFamily, loadPromise);
+  return loadPromise;
+};
+
+/**
+ * Get the font families map for resolving fonts
+ */
+export const getFontFamilies = (): FontFamilyMap => {
+  return fontFamilies;
+};
+
+/**
+ * Initialize the global font handler
+ */
+export const init = (
+  c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  mc: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+): void => {
+  if (initialized === true) {
+    return;
+  }
+
+  if (c === undefined) {
+    throw new Error(
+      'Canvas context is not provided for font handler initialization',
+    );
+  }
+
+  context = c;
+  measureContext = mc;
+
+  // Register the default 'sans-serif' font face
+  const defaultMetrics: FontMetrics = {
+    ascender: 800,
+    descender: -200,
+    lineGap: 200,
+    unitsPerEm: 1000,
+  };
+
+  processFontData('sans-serif', undefined, defaultMetrics);
+  initialized = true;
+};
+
+export const type = 'canvas';
+
+/**
+ * Check if a font is already loaded by font family
+ */
+export const isFontLoaded = (fontFamily: string): boolean => {
+  return fontCache.has(fontFamily);
+};
+
+/**
+ * Wait for a font to load
+ *
+ * @param fontFamily
+ * @param node
+ */
+export const waitingForFont = (fontFamily: string, node: CoreTextNode) => {
+  if (nodesWaitingForFont[fontFamily] === undefined) {
+    return;
+  }
+  nodesWaitingForFont[fontFamily]![node.id] = node;
+};
+
+/**
+ * Stop waiting for a font to load
+ *
+ * @param fontFamily
+ * @param node
+ * @returns
+ */
+export const stopWaitingForFont = (fontFamily: string, node: CoreTextNode) => {
+  if (nodesWaitingForFont[fontFamily] === undefined) {
+    return;
+  }
+
+  delete nodesWaitingForFont[fontFamily][node.id];
+};
+
+export const getFontMetrics = (
+  fontFamily: string,
+  fontSize: number,
+): NormalizedFontMetrics => {
+  const out = normalizedMetrics.get(fontFamily + fontSize);
+  if (out !== undefined) {
+    return out;
+  }
+  let metrics = fontCache.get(fontFamily)!.metrics;
+  if (metrics === undefined) {
+    metrics = calculateFontMetrics(fontFamily, fontSize);
+  }
+  return processFontMetrics(fontFamily, fontSize, metrics);
+};
+
+export const processFontMetrics = (
+  fontFamily: string,
+  fontSize: number,
+  metrics: FontMetrics,
+): NormalizedFontMetrics => {
+  const label = fontFamily + fontSize;
+  const normalized = normalizeFontMetrics(metrics, fontSize);
+  normalizedMetrics.set(label, normalized);
+  return normalized;
+};
+
+export const measureText = (
+  text: string,
+  fontFamily: string,
+  letterSpacing: number,
+) => {
+  if (letterSpacing === 0) {
+    return measureContext.measureText(text).width;
+  }
+  if (hasZeroWidthSpace(text) === false) {
+    return measureContext.measureText(text).width + letterSpacing * text.length;
+  }
+  return text.split('').reduce((acc, char) => {
+    if (hasZeroWidthSpace(char) === true) {
+      return acc;
+    }
+    return acc + measureContext.measureText(char).width + letterSpacing;
+  }, 0);
+};
+
+/**
+ * Get the font metrics for a font face.
+ *
+ * @remarks
+ * This function will attempt to grab the explicitly defined metrics from the
+ * font face first. If the font face does not have metrics defined, it will
+ * attempt to calculate the metrics using the browser's measureText method.
+ *
+ * If the browser does not support the font metrics API, it will use some
+ * default values.
+ *
+ * @param context
+ * @param fontFace
+ * @param fontSize
+ * @returns
+ */
+export function calculateFontMetrics(
+  fontFamily: string,
+  fontSize: number,
+): FontMetrics {
+  // If the font face doesn't have metrics defined, we fallback to using the
+  // browser's measureText method to calculate take a best guess at the font
+  // actual font's metrics.
+  // - fontBoundingBox[Ascent|Descent] is the best estimate but only supported
+  //   in Chrome 87+ (2020), Firefox 116+ (2023), and Safari 11.1+ (2018).
+  //   - It is an estimate as it can vary between browsers.
+  // - actualBoundingBox[Ascent|Descent] is less accurate and supported in
+  //   Chrome 77+ (2019), Firefox 74+ (2020), and Safari 11.1+ (2018).
+  // - If neither are supported, we'll use some default values which will
+  //   get text on the screen but likely not be great.
+  // NOTE: It's been decided not to rely on fontBoundingBox[Ascent|Descent]
+  // as it's browser support is limited and it also tends to produce higher than
+  // expected values. It is instead HIGHLY RECOMMENDED that developers provide
+  // explicit metrics in the font face definition.
+  const metrics = measureContext.measureText(
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+  );
+  console.warn(
+    `Font metrics not provided for Canvas Web font ${fontFamily}. ` +
+      'Using fallback values. It is HIGHLY recommended you use the latest ' +
+      'version of the Lightning 3 `msdf-generator` tool to extract the default ' +
+      'metrics for the font and provide them in the Canvas Web font definition.',
+  );
+  const ascender =
+    metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent ?? 0;
+  const descender =
+    metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent ?? 0;
+  return {
+    ascender,
+    descender: -descender,
+    lineGap:
+      (metrics.emHeightAscent ?? 0) +
+      (metrics.emHeightDescent ?? 0) -
+      (ascender + descender),
+    unitsPerEm: (metrics.emHeightAscent ?? 0) + (metrics.emHeightDescent ?? 0),
+  };
+}