Render text with WebGL
npm install gl-textRender bitmap text with WebGL.
``js
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'
}
})
`
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.
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.
Draw text.
Dispose text renderer.
* text.gl - WebGL context.text.canvas
* - canvas element.text.regl` - regl instance.
*
© 2018 Dmitry Yv. MIT License
Development supported by plot.ly.