Text

See SVG text, supporting features like Bitmap Font, MSDF, Emoji, and bidirectional text.

• Drawing Text with Bitmap Font
• Drawing Text with MSDF
• Drawing Emoji
• Drawing Bidirectional Text
• Drawing with HarfBuzz
• Drawing with Opentype.js
• Physical Text

const text = new Text({
    x: 100,
    y: 100,
    content: 'Hello, World!',
    fontFamily: 'Arial',
    fontSize: 20,
    fontWeight: 'normal',
});

$icCanvas = call(() => {
    return document.createElement('ic-canvas');
});

text = call(() => {
    const { Canvas, Text } = Core;
    const text = new Text({
        x: 300,
        y: 100,
        content: 'Hello, World!\n你好，世界！🌞🌛',
        fontFamily: 'Arial',
        fontSize: 20,
        fontWeight: 'normal',
    });
    return text;
});

call(() => {
    const { Canvas } = Core;
    $icCanvas.parentElement.style.position = 'relative';

    const gui = new GUI({
        container: $icCanvas.parentElement,
    });
    const config = {
        fill: '#000000',
        fontSize: 20,
        fontWeight: 'normal',
        fontStyle: 'normal',
        fontVariant: 'normal',
        letterSpacing: 0,
        textAlign: 'left',
        textBaseline: 'alphabetic',
    };
    gui.addColor(config, 'fill').onChange((fill) => {
        text.fill = fill;
    });
    gui.add(config, 'fontSize', 0, 80, 1).onChange((fontSize) => {
        text.fontSize = fontSize;
    });
    gui.add(config, 'fontWeight', ['normal', 'bold']).onChange((fontWeight) => {
        text.fontWeight = fontWeight;
    });
    gui.add(config, 'fontStyle', ['normal', 'italic']).onChange((fontStyle) => {
        text.fontStyle = fontStyle;
    });
    gui.add(config, 'fontVariant', ['normal', 'small-caps']).onChange(
        (fontVariant) => {
            text.fontVariant = fontVariant;
        },
    );
    gui.add(config, 'letterSpacing', -10, 10, 0.1).onChange((letterSpacing) => {
        text.letterSpacing = letterSpacing;
    });
    gui.add(config, 'textAlign', [
        'left',
        'center',
        'right',
        'start',
        'end',
    ]).onChange((textAlign) => {
        text.textAlign = textAlign;
    });
    gui.add(config, 'textBaseline', [
        'alphabetic',
        'hanging',
        'middle',
        'ideographic',
        'bottom',
        'top',
    ]).onChange((textBaseline) => {
        text.textBaseline = textBaseline;
    });
    $icCanvas.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;
        canvas.appendChild(text);
    });
});

x

The X-axis coordinate of the text, refer to x.

y

The Y-axis coordinate of the text, refer to y.

content

Text content, equivalent to the textContent property of the <text> element in SVG.

fontFamily

Text font family, refer to fontFamily.

fontSize

Text font size, refer to fontSize.

fontWeight

Text font weight, refer to fontWeight.

fontStyle

Text font style, refer to fontStyle.

fontVariant

Text font variant, refer to fontVariant.

letterSpacing

Text letter spacing, refer to letterSpacing.

textAlign

Text alignment, refer to textAlign.

type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';

textBaseline

Text baseline, refer to textBaseline.

type CanvasTextBaseline =
    | 'alphabetic'
    | 'bottom'
    | 'hanging'
    | 'ideographic'
    | 'middle'
    | 'top';

lineHeight

Text line height, refer to lineHeight.

leading

Text leading (space between lines), refer to leading.

bitmapFont

Text bitmap font. Examples:

• Drawing Text with Bitmap Font
• Drawing Text with MSDF

bitmapFontKerning

Whether to enable kerning for bitmap fonts.

esdt

Whether to enable ESDT generation for text, otherwise use EDT. The former has less artificial artifacts, while the latter has better performance.

bidiChars

Get the processed bidirectional text, readonly. Example: Drawing Bidirectional Text

dropShadowColor

Drop shadow color. Reference: CSS drop-shadow. Default value is black.

dropShadowOffsetX

Drop shadow offset along the X-axis. Default value is 0.

dropShadowOffsetY

Drop shadow offset along the Y-axis. Default value is 0.

dropShadowBlurRadius

Drop shadow blur radius. The larger the value, the bigger and more diffused the shadow becomes. Default value is 0.

physical

Whether to enable physical text, see Physical Text.