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.