How to use the @here/harp-text-canvas.TextCanvas function in @here/harp-text-canvas

(loadedFontCatalog: FontCatalog) => {
                // snippet:textcanvas_minimal_1.ts
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 12
                });
                // end:textcanvas_minimal_1.ts
                // snippet:textcanvas_minimal_2.ts
                loadedFontCatalog.loadCharset("Hello World!", new TextRenderStyle()).then(() => {
                    assetsLoaded = true;
                    // end:textcanvas_minimal_2.ts
                    // snippet:textcanvas_minimal_3.ts
                    textCanvas.addText("Hello World!", new THREE.Vector3(0, 0, 0));
                    // end:textcanvas_minimal_3.ts
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                // snippet:textcanvas_material_0.ts
                materialA = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceA
                });
                materialA.uniforms.time = new THREE.Uniform(0.0);
                materialB = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceB
                });
                materialB.uniforms.time = new THREE.Uniform(0.0);
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 12,
                    material: materialA
                });
                // end:textcanvas_material_0.ts
                loadedFontCatalog.loadCharset("TextCanvas", textRenderStyle).then(() => {
                    assetsLoaded = true;
                    textCanvas.textRenderStyle = textRenderStyle;
                    textCanvas.textLayoutStyle = textLayoutStyle;
                    textCanvas.addText("TextCanvas", new THREE.Vector3(0, 0, 0));
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 24
                });
                loadedFontCatalog
                    .loadCharset(textSampleA + textSampleB, new TextRenderStyle())
                    .then(() => {
                        assetsLoaded = true;
                    });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 12
                });
                loadedFontCatalog.loadCharset("0123456789", new TextRenderStyle()).then(() => {
                    assetsLoaded = true;
                    addText();
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(applicationCharset, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: 64
                });
                loadedFontCatalog
                    .loadCharset("black" + "red" + "green" + "blue", textRenderStyle)
                    .then(() => {
                        assetsLoaded = true;
                    });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                    guiOptions.update();
                });
            }
        );

(loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    minGlyphCount: 16,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

.then((loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            })
            .catch(error => {