A canvas texture that manages a grid of fixed-size slots, each holding a rendered glyph or icon. Slots are addressed by string key and can be drawn with text, images, or paths.
On this page
Properties
isFull: boolean
Returns true when all slots are allocated.
capacity: number
Returns the total number of icons that can be added to the atlas.
count: number
Returns the number of icons currently used.
Methods
new MVTGlyphAtlasTexture(
// Maximum number of slots in the atlas.
slotCount: number = 32,
// Width and height of each slot in pixels.
slotSize: number = 64
)keys(): voidReturns the keys associated with all glyphs.
has( key: string ): booleanReturns true if key has an allocated slot.
get( key: string ): Object | nullReturns the slot bounds { x, y, w, h } for key, or null if not allocated.
getSlotSize( target: Vector2 ): Vector2Returns the UV bounds of a slot for key in GPU texture space (flipY applied), or null if not allocated.
getUV( key: string ): Object | nullReturns the UV bounds of the slot for key in GPU texture space (flipY applied), or null if not allocated. x/y is the top-left corner; w/h is the slot size in UV units.
drawChar(
key: string,
// The character to draw.
char: string,
styles: {
// CSS font string (e.g. `'bold 48px sans-serif'`).
font: string = '',
// CSS fill color.
color: string = 'white',
// CSS stroke color drawn under the fill, or null to skip the stroke.
strokeStyle: string | null = null,
// Stroke width in atlas pixels.
strokeWidth: number = 1
}
): ObjectRenders a single character in the slot, centered on its text metrics bounding box.
measureChar( char: string, font: string ): TextMetricsFunction that returns a text metrics object for the given character rendered with the provided set of styles.
drawImage(
key: string,
image: HTMLImageElement | HTMLCanvasElement | ImageBitmap
): ObjectDraws a CanvasImageSource into the slot, scaled to fit.
drawPath(
key: string,
path2D: Path2D,
styles: {
// CSS fill color, or null to skip fill.
fillStyle: string | null = null,
// CSS stroke color, or null to skip stroke.
strokeStyle: string | null = null,
// Stroke width in pixels.
lineWidth: number = 1
}
): ObjectRenders a Path2D into the slot. Path coordinates are slot-local (origin at top-left).
drawSVG(
key: string,
svgText: string,
styles: {
// CSS fill color, or null to skip fill.
fillStyle: string | null = 'white',
// CSS stroke color, or null to skip stroke.
strokeStyle: string | null = null,
// Visible stroke width in atlas pixels.
strokeWidth: number = 1,
// Fraction of the slot size the icon occupies (0–1).
iconScale: number = 1
}
): ObjectParses an SVG string and renders its paths into a slot, scaled to fit.
release( key: string ): voidFrees the slot for key, returning it to the pool for reuse.
resize(
// New maximum slot count.
slotCount: number,
// New slot size in pixels. Defaults to current size.
slotSize?: number
): voidResizes the atlas, copying existing slot content to their new positions.
clear(): voidClears all slots and resets the atlas to empty.