2.0.0 • Published 7 years ago
font-atlas-sdf v2.0.0
font-atlas-sdf 
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.
Usage
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. |
Related
- font-atlas − bitmap font atlas.
- tiny-sdf − fast glyph signed distance field generation.
- optical-properties − glyph optical center and bounding box calculation