JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2776
  • Score
    100M100P100Q131191F
  • License MIT

Populate a <canvas> with SDF font texture atlas

Package Exports

  • font-atlas-sdf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (font-atlas-sdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

font-atlas-sdf experimental

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

npm install font-atlas-sdf

canvas = fontAtlas(options?)

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

  • canvas: use an existing <canvas> element. By default, a new one will be created for you.
  • family: the font family to use when drawing the text. Default: monospace.
  • shape: an array containing the [width, height] for the canvas in pixels. Default: [512, 512].
  • step: an array containing the [width, height] for each cell in pixels. Default: [32, 32].
  • size: the font size to use when drawing the text. Default: 16px
  • chars: 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. By default, this is [32, 126].
  • radius: affects the "slope" of distance-transform, defaults to size × 1.5.
Font atlas texture
  • font-atlas — bitmap font atlas.
  • tiny-sdf — fast glyph signed distance field generation.