@lightningjs/renderer 2.9.0-beta2 → 2.9.0-beta3

package/src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -1,507 +1,509 @@
-/*
- * 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 { EventEmitter } from '../../../common/EventEmitter.js';
-import { assertTruthy } from '../../../utils.js';
-import type { CoreNode } from '../../CoreNode.js';
-import type { CoreTextNode } from '../../CoreTextNode.js';
-import type { Stage } from '../../Stage.js';
-import {
-  getNormalizedRgbaComponents,
-  getNormalizedAlphaComponent,
-} from '../../lib/utils.js';
-import { type FontFamilyMap } from '../TrFontManager.js';
-import type { TrFontFace } from '../font-face-types/TrFontFace.js';
-import { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
-import {
-  LightningTextTextureRenderer,
-  type RenderInfo,
-} from './LightningTextTextureRenderer.js';
-import {
-  TextRenderer,
-  type TextRendererState,
-  type TrFontProps,
-  type TrPropSetters,
-  type TrProps,
-} from './TextRenderer.js';
-
-const resolvedGlobal = typeof self === 'undefined' ? globalThis : self;
-
-/**
- * Global font set regardless of if run in the main thread or a web worker
- */
-const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
-  (resolvedGlobal as any).fonts) as FontFaceSet;
-
-declare module './TextRenderer.js' {
-  interface TextRendererMap {
-    canvas: CanvasTextRenderer;
-  }
-}
-
-function getFontCssString(props: TrProps): string {
-  const { fontFamily, fontStyle, fontWeight, fontStretch, fontSize } = props;
-  return [fontStyle, fontWeight, fontStretch, `${fontSize}px`, fontFamily].join(
-    ' ',
-  );
-}
-
-export interface CanvasTextRendererState extends TextRendererState {
-  node: CoreTextNode;
-  props: TrProps;
-  fontInfo:
-    | {
-        fontFace: WebTrFontFace;
-        cssString: string;
-        loaded: boolean;
-      }
-    | undefined;
-  textureNode: CoreNode | undefined;
-  lightning2TextRenderer: LightningTextTextureRenderer;
-  renderInfo: RenderInfo | undefined;
-}
-
-export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
-  protected canvas: OffscreenCanvas | HTMLCanvasElement;
-  protected context:
-    | OffscreenCanvasRenderingContext2D
-    | CanvasRenderingContext2D;
-  /**
-   * Font family map used to store web font faces that were added to the
-   * canvas text renderer.
-   */
-  private fontFamilies: FontFamilyMap = {};
-  private fontFamilyArray: FontFamilyMap[] = [this.fontFamilies];
-
-  public type: 'canvas' | 'sdf' = 'canvas';
-
-  constructor(stage: Stage) {
-    super(stage);
-    if (typeof OffscreenCanvas !== 'undefined') {
-      this.canvas = new OffscreenCanvas(0, 0);
-    } else {
-      this.canvas = document.createElement('canvas');
-    }
-
-    let context = this.canvas.getContext('2d', {
-      willReadFrequently: true,
-    }) as OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
-    if (!context) {
-      // A browser may appear to support OffscreenCanvas but not actually support the Canvas '2d' context
-      // Here we try getting the context again after falling back to an HTMLCanvasElement.
-      // See: https://github.com/lightning-js/renderer/issues/26#issuecomment-1750438486
-      this.canvas = document.createElement('canvas');
-      context = this.canvas.getContext('2d', {
-        willReadFrequently: true,
-      });
-    }
-    assertTruthy(context);
-    this.context = context;
-
-    // Install the default 'san-serif' font face
-    this.addFontFace(
-      new WebTrFontFace({
-        fontFamily: 'sans-serif',
-        descriptors: {},
-        fontUrl: '',
-      }),
-    );
-  }
-
-  //#region Overrides
-  override getPropertySetters(): Partial<
-    TrPropSetters<CanvasTextRendererState>
-  > {
-    return {
-      fontFamily: (state, value) => {
-        state.props.fontFamily = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontWeight: (state, value) => {
-        state.props.fontWeight = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontStyle: (state, value) => {
-        state.props.fontStyle = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontStretch: (state, value) => {
-        state.props.fontStretch = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      fontSize: (state, value) => {
-        state.props.fontSize = value;
-        state.fontInfo = undefined;
-        this.invalidateLayoutCache(state);
-      },
-      text: (state, value) => {
-        state.props.text = value;
-        this.invalidateLayoutCache(state);
-      },
-      textAlign: (state, value) => {
-        state.props.textAlign = value;
-        this.invalidateLayoutCache(state);
-      },
-      color: (state, value) => {
-        state.props.color = value;
-        this.invalidateLayoutCache(state);
-      },
-      x: (state, value) => {
-        state.props.x = value;
-      },
-      y: (state, value) => {
-        state.props.y = value;
-      },
-      contain: (state, value) => {
-        state.props.contain = value;
-        this.invalidateLayoutCache(state);
-      },
-      width: (state, value) => {
-        state.props.width = value;
-        // Only invalidate layout cache if we're containing in the horizontal direction
-        if (state.props.contain !== 'none') {
-          this.invalidateLayoutCache(state);
-        }
-      },
-      height: (state, value) => {
-        state.props.height = value;
-        // Only invalidate layout cache if we're containing in the vertical direction
-        if (state.props.contain === 'both') {
-          this.invalidateLayoutCache(state);
-        }
-      },
-      offsetY: (state, value) => {
-        state.props.offsetY = value;
-        this.invalidateLayoutCache(state);
-      },
-      scrollY: (state, value) => {
-        state.props.scrollY = value;
-      },
-      letterSpacing: (state, value) => {
-        state.props.letterSpacing = value;
-        this.invalidateLayoutCache(state);
-      },
-      lineHeight: (state, value) => {
-        state.props.lineHeight = value;
-        this.invalidateLayoutCache(state);
-      },
-      maxLines: (state, value) => {
-        state.props.maxLines = value;
-        this.invalidateLayoutCache(state);
-      },
-      textBaseline: (state, value) => {
-        state.props.textBaseline = value;
-        this.invalidateLayoutCache(state);
-      },
-      verticalAlign: (state, value) => {
-        state.props.verticalAlign = value;
-        this.invalidateLayoutCache(state);
-      },
-      overflowSuffix: (state, value) => {
-        state.props.overflowSuffix = value;
-        this.invalidateLayoutCache(state);
-      },
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  override canRenderFont(props: TrFontProps): boolean {
-    // The canvas renderer can render any font because it automatically
-    // falls back to system fonts. The CanvasTextRenderer should be
-    // checked last if other renderers are preferred.
-    return true;
-  }
-
-  override isFontFaceSupported(fontFace: TrFontFace): boolean {
-    return fontFace instanceof WebTrFontFace;
-  }
-
-  override addFontFace(fontFace: TrFontFace): void {
-    // Make sure the font face is an Canvas font face (it should have already passed
-    // the `isFontFaceSupported` check)
-    assertTruthy(fontFace instanceof WebTrFontFace);
-
-    const fontFamily = fontFace.fontFamily;
-
-    // Add the font face to the document
-    // Except for the 'sans-serif' font family, which the Renderer provides
-    // as a special default fallback.
-    if (fontFamily !== 'sans-serif') {
-      // @ts-expect-error `add()` method should be available from a FontFaceSet
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      globalFontSet.add(fontFace.fontFace);
-    }
-
-    let faceSet = this.fontFamilies[fontFamily];
-    if (!faceSet) {
-      faceSet = new Set();
-      this.fontFamilies[fontFamily] = faceSet;
-    }
-    faceSet.add(fontFace);
-  }
-
-  override createState(
-    props: TrProps,
-    node: CoreTextNode,
-  ): CanvasTextRendererState {
-    return {
-      node,
-      props,
-      status: 'initialState',
-      updateScheduled: false,
-      emitter: new EventEmitter(),
-      textureNode: undefined,
-      lightning2TextRenderer: new LightningTextTextureRenderer(
-        this.canvas,
-        this.context,
-      ),
-      renderInfo: undefined,
-      forceFullLayoutCalc: false,
-      textW: 0,
-      textH: 0,
-      fontInfo: undefined,
-      isRenderable: false,
-      debugData: {
-        updateCount: 0,
-        layoutCount: 0,
-        drawCount: 0,
-        lastLayoutNumCharacters: 0,
-        layoutSum: 0,
-        drawSum: 0,
-        bufferSize: 0,
-      },
-    };
-  }
-
-  override updateState(state: CanvasTextRendererState): void {
-    // On the first update call we need to set the status to loading
-    if (state.status === 'initialState') {
-      this.setStatus(state, 'loading');
-      // check if we're on screen
-      // if (this.isValidOnScreen(state) === true) {
-      //   this.setStatus(state, 'loading');
-      // }
-    }
-
-    if (state.status === 'loaded') {
-      // If we're loaded, we don't need to do anything
-      return;
-    }
-
-    // If fontInfo is invalid, we need to establish it
-    if (!state.fontInfo) {
-      return this.loadFont(state);
-    }
-
-    // If we're waiting for a font face to load, don't render anything
-    if (!state.fontInfo.loaded) {
-      return;
-    }
-
-    if (!state.renderInfo) {
-      state.renderInfo = this.calculateRenderInfo(state);
-      state.textH = state.renderInfo.lineHeight * state.renderInfo.lines.length;
-      state.textW = state.renderInfo.width;
-      this.renderSingleCanvasPage(state);
-    }
-
-    // handle scrollable text !!!
-    // if (state.isScrollable === true) {
-    //   return this.renderScrollableCanvasPages(state);
-    // }
-
-    // handle single page text
-  }
-
-  renderSingleCanvasPage(state: CanvasTextRendererState): void {
-    assertTruthy(state.renderInfo);
-    const node = state.node;
-
-    const texture = this.stage.txManager.loadTexture('ImageTexture', {
-      src: function (
-        this: CanvasTextRenderer,
-        lightning2TextRenderer: LightningTextTextureRenderer,
-        renderInfo: RenderInfo,
-      ) {
-        // load the canvas texture
-        assertTruthy(renderInfo);
-        lightning2TextRenderer.draw(renderInfo, {
-          lines: renderInfo.lines,
-          lineWidths: renderInfo.lineWidths,
-        });
-        if (this.canvas.width === 0 || this.canvas.height === 0) {
-          return null;
-        }
-        return this.context.getImageData(
-          0,
-          0,
-          this.canvas.width,
-          this.canvas.height,
-        );
-      }.bind(this, state.lightning2TextRenderer, state.renderInfo),
-    });
-    if (state.textureNode) {
-      // Use the existing texture node
-      state.textureNode.texture = texture;
-      // Update the alpha
-      state.textureNode.alpha = getNormalizedAlphaComponent(state.props.color);
-    } else {
-      // Create a new texture node
-      const textureNode = this.stage.createNode({
-        parent: node,
-        texture,
-        autosize: true,
-        // The alpha channel of the color is ignored when rasterizing the text
-        // texture so we need to pass it directly to the texture node.
-        alpha: getNormalizedAlphaComponent(state.props.color),
-      });
-      state.textureNode = textureNode;
-    }
-
-    this.setStatus(state, 'loaded');
-  }
-
-  loadFont = (state: CanvasTextRendererState): void => {
-    const cssString = getFontCssString(state.props);
-
-    const trFontFace = this.stage.fontManager.resolveFontFace(
-      this.fontFamilyArray,
-      state.props,
-      'canvas',
-    ) as WebTrFontFace | undefined;
-    assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
-    state.fontInfo = {
-      fontFace: trFontFace,
-      cssString: cssString,
-      // TODO: For efficiency we would use this here but it's not reliable on WPE -> document.fonts.check(cssString),
-      loaded: false,
-    };
-    // If font is not loaded, set up a handler to update the font info when the font loads
-    if (!state.fontInfo.loaded) {
-      globalFontSet
-        .load(cssString)
-        .then(this.onFontLoaded.bind(this, state, cssString))
-        .catch(this.onFontLoadError.bind(this, state, cssString));
-      return;
-    }
-  };
-
-  calculateRenderInfo(state: CanvasTextRendererState): RenderInfo {
-    state.lightning2TextRenderer.settings = {
-      text: state.props.text,
-      textAlign: state.props.textAlign,
-      fontFamily: state.props.fontFamily,
-      trFontFace: state.fontInfo?.fontFace,
-      fontSize: state.props.fontSize,
-      fontStyle: [
-        state.props.fontStretch,
-        state.props.fontStyle,
-        state.props.fontWeight,
-      ].join(' '),
-      textColor: getNormalizedRgbaComponents(state.props.color),
-      offsetY: state.props.offsetY,
-      wordWrap: state.props.contain !== 'none',
-      wordWrapWidth:
-        state.props.contain === 'none' ? undefined : state.props.width,
-      letterSpacing: state.props.letterSpacing,
-      lineHeight: state.props.lineHeight ?? null,
-      maxLines: state.props.maxLines,
-      maxHeight:
-        state.props.contain === 'both'
-          ? state.props.height - state.props.offsetY
-          : null,
-      textBaseline: state.props.textBaseline,
-      verticalAlign: state.props.verticalAlign,
-      overflowSuffix: state.props.overflowSuffix,
-      w: state.props.contain !== 'none' ? state.props.width : undefined,
-    };
-    state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
-    return state.renderInfo;
-  }
-
-  override renderQuads(): void {
-    // Do nothing. The renderer will render the child node(s) that were created
-    // in the state update.
-    return;
-  }
-
-  override destroyState(state: CanvasTextRendererState): void {
-    if (state.status === 'destroyed') {
-      return;
-    }
-    super.destroyState(state);
-
-    if (state.textureNode) {
-      state.textureNode.destroy();
-      delete state.textureNode;
-    }
-    delete state.renderInfo;
-  }
-  //#endregion Overrides
-
-  /**
-   * Invalidate the layout cache stored in the state. This will cause the text
-   * to be re-rendered on the next update.
-   *
-   * @remarks
-   * This also invalidates the visible window cache.
-   *
-   * @param state
-   */
-  private invalidateLayoutCache(state: CanvasTextRendererState): void {
-    state.renderInfo = undefined;
-    this.setStatus(state, 'loading');
-    this.scheduleUpdateState(state);
-  }
-
-  private onFontLoaded(
-    state: CanvasTextRendererState,
-    cssString: string,
-  ): void {
-    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
-      return;
-    }
-    state.fontInfo.loaded = true;
-    this.scheduleUpdateState(state);
-  }
-
-  private onFontLoadError(
-    state: CanvasTextRendererState,
-    cssString: string,
-    error: Error,
-  ): void {
-    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
-      return;
-    }
-
-    // Font didn't actually load, but we'll log the error and mark it as loaded
-    // because the browser can still render with a fallback font.
-    state.fontInfo.loaded = true;
-
-    console.error(
-      `CanvasTextRenderer: Error loading font '${state.fontInfo.cssString}'`,
-      error,
-    );
-    this.scheduleUpdateState(state);
-  }
-}
+/*
+ * 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 { EventEmitter } from '../../../common/EventEmitter.js';
+import { assertTruthy } from '../../../utils.js';
+import type { CoreNode } from '../../CoreNode.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
+import type { Stage } from '../../Stage.js';
+import {
+  getNormalizedRgbaComponents,
+  getNormalizedAlphaComponent,
+} from '../../lib/utils.js';
+import { type FontFamilyMap } from '../TrFontManager.js';
+import type { TrFontFace } from '../font-face-types/TrFontFace.js';
+import { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
+import {
+  LightningTextTextureRenderer,
+  type RenderInfo,
+} from './LightningTextTextureRenderer.js';
+import {
+  TextRenderer,
+  type TextRendererState,
+  type TrFontProps,
+  type TrPropSetters,
+  type TrProps,
+} from './TextRenderer.js';
+
+const resolvedGlobal = typeof self === 'undefined' ? globalThis : self;
+
+/**
+ * Global font set regardless of if run in the main thread or a web worker
+ */
+const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
+  (resolvedGlobal as any).fonts) as FontFaceSet;
+
+declare module './TextRenderer.js' {
+  interface TextRendererMap {
+    canvas: CanvasTextRenderer;
+  }
+}
+
+function getFontCssString(props: TrProps): string {
+  const { fontFamily, fontStyle, fontWeight, fontStretch, fontSize } = props;
+  return [fontStyle, fontWeight, fontStretch, `${fontSize}px`, fontFamily].join(
+    ' ',
+  );
+}
+
+export interface CanvasTextRendererState extends TextRendererState {
+  node: CoreTextNode;
+  props: TrProps;
+  fontInfo:
+    | {
+        fontFace: WebTrFontFace;
+        cssString: string;
+        loaded: boolean;
+      }
+    | undefined;
+  textureNode: CoreNode | undefined;
+  lightning2TextRenderer: LightningTextTextureRenderer;
+  renderInfo: RenderInfo | undefined;
+}
+
+export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
+  protected canvas: OffscreenCanvas | HTMLCanvasElement;
+  protected context:
+    | OffscreenCanvasRenderingContext2D
+    | CanvasRenderingContext2D;
+  /**
+   * Font family map used to store web font faces that were added to the
+   * canvas text renderer.
+   */
+  private fontFamilies: FontFamilyMap = {};
+  private fontFamilyArray: FontFamilyMap[] = [this.fontFamilies];
+
+  public type: 'canvas' | 'sdf' = 'canvas';
+
+  constructor(stage: Stage) {
+    super(stage);
+    if (typeof OffscreenCanvas !== 'undefined') {
+      this.canvas = new OffscreenCanvas(0, 0);
+    } else {
+      this.canvas = document.createElement('canvas');
+    }
+
+    let context = this.canvas.getContext('2d', {
+      willReadFrequently: true,
+    }) as OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
+    if (!context) {
+      // A browser may appear to support OffscreenCanvas but not actually support the Canvas '2d' context
+      // Here we try getting the context again after falling back to an HTMLCanvasElement.
+      // See: https://github.com/lightning-js/renderer/issues/26#issuecomment-1750438486
+      this.canvas = document.createElement('canvas');
+      context = this.canvas.getContext('2d', {
+        willReadFrequently: true,
+      });
+    }
+    assertTruthy(context);
+    this.context = context;
+
+    // Install the default 'san-serif' font face
+    this.addFontFace(
+      new WebTrFontFace({
+        fontFamily: 'sans-serif',
+        descriptors: {},
+        fontUrl: '',
+      }),
+    );
+  }
+
+  //#region Overrides
+  override getPropertySetters(): Partial<
+    TrPropSetters<CanvasTextRendererState>
+  > {
+    return {
+      fontFamily: (state, value) => {
+        state.props.fontFamily = value;
+        state.fontInfo = undefined;
+        this.invalidateLayoutCache(state);
+      },
+      fontWeight: (state, value) => {
+        state.props.fontWeight = value;
+        state.fontInfo = undefined;
+        this.invalidateLayoutCache(state);
+      },
+      fontStyle: (state, value) => {
+        state.props.fontStyle = value;
+        state.fontInfo = undefined;
+        this.invalidateLayoutCache(state);
+      },
+      fontStretch: (state, value) => {
+        state.props.fontStretch = value;
+        state.fontInfo = undefined;
+        this.invalidateLayoutCache(state);
+      },
+      fontSize: (state, value) => {
+        state.props.fontSize = value;
+        state.fontInfo = undefined;
+        this.invalidateLayoutCache(state);
+      },
+      text: (state, value) => {
+        state.props.text = value;
+        this.invalidateLayoutCache(state);
+      },
+      textAlign: (state, value) => {
+        state.props.textAlign = value;
+        this.invalidateLayoutCache(state);
+      },
+      color: (state, value) => {
+        state.props.color = value;
+        this.invalidateLayoutCache(state);
+      },
+      x: (state, value) => {
+        state.props.x = value;
+      },
+      y: (state, value) => {
+        state.props.y = value;
+      },
+      contain: (state, value) => {
+        state.props.contain = value;
+        this.invalidateLayoutCache(state);
+      },
+      width: (state, value) => {
+        state.props.width = value;
+        // Only invalidate layout cache if we're containing in the horizontal direction
+        if (state.props.contain !== 'none') {
+          this.invalidateLayoutCache(state);
+        }
+      },
+      height: (state, value) => {
+        state.props.height = value;
+        // Only invalidate layout cache if we're containing in the vertical direction
+        if (state.props.contain === 'both') {
+          this.invalidateLayoutCache(state);
+        }
+      },
+      offsetY: (state, value) => {
+        state.props.offsetY = value;
+        this.invalidateLayoutCache(state);
+      },
+      scrollY: (state, value) => {
+        state.props.scrollY = value;
+      },
+      letterSpacing: (state, value) => {
+        state.props.letterSpacing = value;
+        this.invalidateLayoutCache(state);
+      },
+      lineHeight: (state, value) => {
+        state.props.lineHeight = value;
+        this.invalidateLayoutCache(state);
+      },
+      maxLines: (state, value) => {
+        state.props.maxLines = value;
+        this.invalidateLayoutCache(state);
+      },
+      textBaseline: (state, value) => {
+        state.props.textBaseline = value;
+        this.invalidateLayoutCache(state);
+      },
+      verticalAlign: (state, value) => {
+        state.props.verticalAlign = value;
+        this.invalidateLayoutCache(state);
+      },
+      overflowSuffix: (state, value) => {
+        state.props.overflowSuffix = value;
+        this.invalidateLayoutCache(state);
+      },
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override canRenderFont(props: TrFontProps): boolean {
+    // The canvas renderer can render any font because it automatically
+    // falls back to system fonts. The CanvasTextRenderer should be
+    // checked last if other renderers are preferred.
+    return true;
+  }
+
+  override isFontFaceSupported(fontFace: TrFontFace): boolean {
+    return fontFace instanceof WebTrFontFace;
+  }
+
+  override addFontFace(fontFace: TrFontFace): void {
+    // Make sure the font face is an Canvas font face (it should have already passed
+    // the `isFontFaceSupported` check)
+    assertTruthy(fontFace instanceof WebTrFontFace);
+
+    const fontFamily = fontFace.fontFamily;
+
+    // Add the font face to the document
+    // Except for the 'sans-serif' font family, which the Renderer provides
+    // as a special default fallback.
+    if (fontFamily !== 'sans-serif') {
+      // @ts-expect-error `add()` method should be available from a FontFaceSet
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      globalFontSet.add(fontFace.fontFace);
+    }
+
+    let faceSet = this.fontFamilies[fontFamily];
+    if (!faceSet) {
+      faceSet = new Set();
+      this.fontFamilies[fontFamily] = faceSet;
+    }
+    faceSet.add(fontFace);
+  }
+
+  override createState(
+    props: TrProps,
+    node: CoreTextNode,
+  ): CanvasTextRendererState {
+    return {
+      node,
+      props,
+      status: 'initialState',
+      updateScheduled: false,
+      emitter: new EventEmitter(),
+      textureNode: undefined,
+      lightning2TextRenderer: new LightningTextTextureRenderer(
+        this.canvas,
+        this.context,
+      ),
+      renderInfo: undefined,
+      forceFullLayoutCalc: false,
+      textW: 0,
+      textH: 0,
+      fontInfo: undefined,
+      isRenderable: false,
+      debugData: {
+        updateCount: 0,
+        layoutCount: 0,
+        drawCount: 0,
+        lastLayoutNumCharacters: 0,
+        layoutSum: 0,
+        drawSum: 0,
+        bufferSize: 0,
+      },
+    };
+  }
+
+  override updateState(state: CanvasTextRendererState): void {
+    // On the first update call we need to set the status to loading
+    if (state.status === 'initialState') {
+      this.setStatus(state, 'loading');
+      // check if we're on screen
+      // if (this.isValidOnScreen(state) === true) {
+      //   this.setStatus(state, 'loading');
+      // }
+    }
+
+    if (state.status === 'loaded') {
+      // If we're loaded, we don't need to do anything
+      return;
+    }
+
+    // If fontInfo is invalid, we need to establish it
+    if (!state.fontInfo) {
+      return this.loadFont(state);
+    }
+
+    // If we're waiting for a font face to load, don't render anything
+    if (!state.fontInfo.loaded) {
+      return;
+    }
+
+    if (!state.renderInfo) {
+      state.renderInfo = this.calculateRenderInfo(state);
+      state.textH = state.renderInfo.lineHeight * state.renderInfo.lines.length;
+      state.textW = state.renderInfo.width;
+      this.renderSingleCanvasPage(state);
+    }
+
+    // handle scrollable text !!!
+    // if (state.isScrollable === true) {
+    //   return this.renderScrollableCanvasPages(state);
+    // }
+
+    // handle single page text
+  }
+
+  renderSingleCanvasPage(state: CanvasTextRendererState): void {
+    assertTruthy(state.renderInfo);
+    const node = state.node;
+
+    const texture = this.stage.txManager.createTexture('ImageTexture', {
+      premultiplyAlpha: true,
+      src: function (
+        this: CanvasTextRenderer,
+        lightning2TextRenderer: LightningTextTextureRenderer,
+        renderInfo: RenderInfo,
+      ) {
+        // load the canvas texture
+        assertTruthy(renderInfo);
+        lightning2TextRenderer.draw(renderInfo, {
+          lines: renderInfo.lines,
+          lineWidths: renderInfo.lineWidths,
+        });
+        if (this.canvas.width === 0 || this.canvas.height === 0) {
+          return null;
+        }
+        return this.context.getImageData(
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height,
+        );
+      }.bind(this, state.lightning2TextRenderer, state.renderInfo),
+    });
+
+    if (state.textureNode) {
+      // Use the existing texture node
+      state.textureNode.texture = texture;
+      // Update the alpha
+      state.textureNode.alpha = getNormalizedAlphaComponent(state.props.color);
+    } else {
+      // Create a new texture node
+      const textureNode = this.stage.createNode({
+        parent: node,
+        texture,
+        autosize: true,
+        // The alpha channel of the color is ignored when rasterizing the text
+        // texture so we need to pass it directly to the texture node.
+        alpha: getNormalizedAlphaComponent(state.props.color),
+      });
+      state.textureNode = textureNode;
+    }
+
+    this.setStatus(state, 'loaded');
+  }
+
+  loadFont = (state: CanvasTextRendererState): void => {
+    const cssString = getFontCssString(state.props);
+
+    const trFontFace = this.stage.fontManager.resolveFontFace(
+      this.fontFamilyArray,
+      state.props,
+      'canvas',
+    ) as WebTrFontFace | undefined;
+    assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
+    state.fontInfo = {
+      fontFace: trFontFace,
+      cssString: cssString,
+      // TODO: For efficiency we would use this here but it's not reliable on WPE -> document.fonts.check(cssString),
+      loaded: false,
+    };
+    // If font is not loaded, set up a handler to update the font info when the font loads
+    if (!state.fontInfo.loaded) {
+      globalFontSet
+        .load(cssString)
+        .then(this.onFontLoaded.bind(this, state, cssString))
+        .catch(this.onFontLoadError.bind(this, state, cssString));
+      return;
+    }
+  };
+
+  calculateRenderInfo(state: CanvasTextRendererState): RenderInfo {
+    state.lightning2TextRenderer.settings = {
+      text: state.props.text,
+      textAlign: state.props.textAlign,
+      fontFamily: state.props.fontFamily,
+      trFontFace: state.fontInfo?.fontFace,
+      fontSize: state.props.fontSize,
+      fontStyle: [
+        state.props.fontStretch,
+        state.props.fontStyle,
+        state.props.fontWeight,
+      ].join(' '),
+      textColor: getNormalizedRgbaComponents(state.props.color),
+      offsetY: state.props.offsetY,
+      wordWrap: state.props.contain !== 'none',
+      wordWrapWidth:
+        state.props.contain === 'none' ? undefined : state.props.width,
+      letterSpacing: state.props.letterSpacing,
+      lineHeight: state.props.lineHeight ?? null,
+      maxLines: state.props.maxLines,
+      maxHeight:
+        state.props.contain === 'both'
+          ? state.props.height - state.props.offsetY
+          : null,
+      textBaseline: state.props.textBaseline,
+      verticalAlign: state.props.verticalAlign,
+      overflowSuffix: state.props.overflowSuffix,
+      w: state.props.contain !== 'none' ? state.props.width : undefined,
+    };
+    state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
+    return state.renderInfo;
+  }
+
+  override renderQuads(): void {
+    // Do nothing. The renderer will render the child node(s) that were created
+    // in the state update.
+    return;
+  }
+
+  override destroyState(state: CanvasTextRendererState): void {
+    if (state.status === 'destroyed') {
+      return;
+    }
+    super.destroyState(state);
+
+    if (state.textureNode) {
+      state.textureNode.destroy();
+      delete state.textureNode;
+    }
+    delete state.renderInfo;
+  }
+  //#endregion Overrides
+
+  /**
+   * Invalidate the layout cache stored in the state. This will cause the text
+   * to be re-rendered on the next update.
+   *
+   * @remarks
+   * This also invalidates the visible window cache.
+   *
+   * @param state
+   */
+  private invalidateLayoutCache(state: CanvasTextRendererState): void {
+    state.renderInfo = undefined;
+    this.setStatus(state, 'loading');
+    this.scheduleUpdateState(state);
+  }
+
+  private onFontLoaded(
+    state: CanvasTextRendererState,
+    cssString: string,
+  ): void {
+    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
+      return;
+    }
+    state.fontInfo.loaded = true;
+    this.scheduleUpdateState(state);
+  }
+
+  private onFontLoadError(
+    state: CanvasTextRendererState,
+    cssString: string,
+    error: Error,
+  ): void {
+    if (cssString !== state.fontInfo?.cssString || !state.fontInfo) {
+      return;
+    }
+
+    // Font didn't actually load, but we'll log the error and mark it as loaded
+    // because the browser can still render with a fallback font.
+    state.fontInfo.loaded = true;
+
+    console.error(
+      `CanvasTextRenderer: Error loading font '${state.fontInfo.cssString}'`,
+      error,
+    );
+    this.scheduleUpdateState(state);
+  }
+}