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
© 2018 Dmitry Yv. MIT License
Development supported by plot.ly.