Neoanthropic Preternatural Murmurings


    2.0.0 • Public • Published

    font-atlas-sdf unstable

    Populate a <canvas> element with a font texture atlas – can be used to quickly generate SDF (Signed Distance Field) fonts. SDF is the most efficient way to draw text in WebGL, see article. For bitmap fonts see font-atlas.



    npm install font-atlas-sdf

    canvas = fontAtlas(options?)

    Populates and returns a <canvas> element with a font texture atlas. Takes the following options:

    Property Default Meaning
    canvas New canvas use an existing <canvas> element.
    font 16px sans-serif the font family to use when drawing the text. Can be a css font string or an object with font properties: size, family, style, weight, variant, stretch.
    shape [512, 512] an array containing the [width, height] for the canvas in pixels.
    step [32, 32] an array containing the [width, height] for each cell in pixels.
    chars [32, 126] may be one of either: a string containing all of the characters to use; an array of all the characters to use; an array specifying the [start, end] character codes to use.
    radius size × 1.5 affects the "slope" of distance-transform.
    align 'optical' align symbol vertically by bounding box rather than font baseline. Available values: 'optical' for center of mass alignment (see optical-properties), 'bounds' for bounding box alignment or false to use font alignment.
    fit 0.5 normalize glyph sizes to cover same part of size. Can be a number or bool, eg. 0.5 covers half of size, 1 fits to the full size and false disables fit.
    Font atlas texture



    npm i font-atlas-sdf

    DownloadsWeekly Downloads






    Unpacked Size

    249 kB

    Total Files


    Last publish


    • dfcreative