Package Exports

gl-text
gl-text/dist.js

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 (gl-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gl-text

Render bitmap text with WebGL.

Usage

const Text = require('gl-text')

let text1 = new Text()

text1.update({
    position: [50, 50],
    text: 'ABC',
    font: '16px Helvetica, sans-serif'
})
text1.render()

// create another text renderer on the same context
let text2 = new Text(text1.gl)
text2.update({
    font: {
        family: ['Helvetica', 'Arial', 'sans-serif'],
        size: '1rem'
    }
})

API

`let text = new Text(gl|regl|canvas|container|options?)`

Create text renderer instance for the WebGL context gl, regl instance, canvas/container element or based on options:

Option	Meaning
`regl`	Existing `regl` instance. By default new one is created.
`gl`/`context`	Existing WebGL context. By default new one is created.
`canvas`	Existing `canvas` element.
`container`	Existing `container` element. By default new canvas is created within the container.

No arguments call creates new fullscreen canvas.

`text.update(options)`

Update state of a Text instance.

Option	Description
`text`	Text string or array of strings to display.
`position`	Position of the text on the screen within the `range`, a couple `[x, y]` or array `[[x ,y], [x, y], ...]` corresponding to text.
`align`	Horizontal alignment relative to the `position`. Can be one of `left`, `right`, `center`/`middle`, `start`, `end`, or a number of em units. By default `left`. Can be an array, corresponding to text.
`baseline`	Vertical alignment value, by default `middle`. Can be a string one of `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom` etc. (see font-measure) or a number of em units, denoting `0` as alphabetic baseline. Can be an array corresponding to text.
`color`	Text color or array of colors. By default `black`.
`font`	Font family, CSS font string or an object with font properties like `{family, size, style}`, see css-font. Can be an array.
`fontSize`/`em`	Font-size, can be changed independently of `font`.
`kerning`	Enable font kerning, by default `true`. Disable for the case of monospace fonts. See detect-kerning package.
`offset`	Shift `position` by the number of ems. Useful for organizing multiple lines, indentation, sub/sup script etc. Does not get affected by `position` change. Can be a number for x-offset only or a couple `[x, y]` for single position or array `[[x, y], [x, y], ...]` for multiple positions.
`range`	Data area corresponding to position in viewport. Useful for organizing zoom/pan. By default is the same as the viewport `[0, 0, canvas.width, canvas.height]`.
`scale`/`translate`	An alternative to `range`.
`viewport`	Visible area within the canvas, an array `[left, top, width, height]` or rectangle `{x, y, width, height}`, see parse-rect.

`text.render()`

Draw text.

`text.destroy()`

Dispose text renderer.

Properties

text.gl - WebGL context.
text.canvas - canvas element.
text.regl - regl instance.

License

Development supported by plot.ly.