Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nightre/Rapid.js/llms.txt

Use this file to discover all available pages before exploring further.

TextTexture extends Texture and bridges the HTML5 Canvas 2D text rendering API with the WebGL pipeline. Each instance maintains an internal HTMLCanvasElement, measures and draws the current text with the configured style, then uploads the result as a WebGL texture. The canvas is sized at device-pixel-ratio resolution and the Texture.scale property is set to 1 / dpr, so text appears crisp on high-DPR screens without any extra work.
Both the text and style setters automatically re-render the canvas and re-upload to the GPU. You do not need to call update() manually in most cases.

​
Creating a TextTexture

Use rapid.texture.createTextTexture() rather than constructing the class directly. 
const label = rapid.texture.createTextTexture({
  text: "Score: 0",
  fontFamily: "Arial",
  fontSize: 32,
  fontWeight: "bold",
  fill: "#ffffff",
  stroke: "#000000",
  strokeThickness: 2,
  align: "left",
  baseline: "top",
});

​
ITextStyle

All style fields are optional. Unset fields fall back to their default values.
​
fontFamily
string
default:"\"Arial\""
CSS font family name. Any font available in the browser can be used, including web fonts loaded with @font-face — as long as the font has finished loading before the TextTexture is first rendered.
​
fontSize
number
default:"24"
Font size in logical CSS pixels. The internal canvas scales this by dpr so the rendered pixels are always sharp.
​
fontWeight
string
default:"\"normal\""
CSS font weight string, e.g. "normal", "bold", "700".
​
fill
string | CanvasGradient | CanvasPattern
Text fill color or style. Accepts any value valid as a Canvas 2D fillStyle — a CSS color string, a CanvasGradient, or a CanvasPattern. When omitted the text interior is not filled.
​
stroke
string | CanvasGradient | CanvasPattern
Text outline color or style. Accepts the same types as fill. Has no visual effect if strokeThickness is 0.
​
strokeThickness
number
default:"1"
Width of the outline stroke in logical CSS pixels. The outline is rendered before the fill so it appears behind the filled text. Set to 0 to disable.
​
align
"left" | "center" | "right"
default:"\"left\""
Horizontal alignment anchor. Affects offsetX on the texture:
ValueoffsetXEffect
"left"0Draw position is the left edge of the text.
"center"-width / 2Draw position is the horizontal center.
"right"-widthDraw position is the right edge.
​
baseline
CanvasTextBaseline
default:"\"top\""
Vertical alignment anchor. Affects offsetY on the texture. The most useful values are:
ValueoffsetYEffect
"top"0Draw position is the top of the text.
"middle"-height / 2Draw position is the vertical center.
"bottom"-heightDraw position is the bottom.
Other CanvasTextBaseline values ("alphabetic", "hanging", "ideographic") map to offsetY = 0.

​
ITextOptions

ITextOptions is the interface accepted by createTextTexture(). It extends both ITextStyle and ITextureOptions, adding one additional field:
​
text
string
The initial text string to display. Defaults to an empty string if omitted. The value can be updated at any time via the text setter.
All fields from ITextStyle (font, fill, stroke, align, baseline) and ITextureOptions (textureFilter, wrap, premultipliedAlpha, key) are also valid in this object.

​
Properties

​
text (getter / setter)

The current text string displayed by this texture. 
// Read
console.log(label.text); // "Score: 0"

// Write — re-uploads texture automatically
label.text = "Score: 100";
Setting the same string again is a no-op (the setter checks for equality before triggering a re-upload).

​
style (getter / setter)

The current ITextStyle configuration. The setter performs a partial merge — only the properties you supply are changed; all others retain their current values. The texture is re-uploaded after every set. 
// Read the full style
const currentStyle = label.style;

// Partial update — only fontSize and fill change
label.style = { fontSize: 40, fill: "#ffd700" };

​
flipY

Always true on TextTexture. Instructs the renderer to vertically flip the UV coordinates when drawing, correcting the orientation difference between the HTML5 Canvas coordinate system (top-left origin) and WebGL (bottom-left origin).

​
Methods

​
update()

Manually re-renders the internal canvas and re-uploads the texture to the GPU. You only need to call this if you have bypassed the text/style setters and mutated internal state directly. 
label.update();
Returns: void

​
Alignment and offset Behaviour

TextTexture uses offsetX and offsetY on the base Texture class to shift the draw position without requiring you to adjust the coordinates you pass to drawSprite(). The offsets are recomputed every time update() runs. 
// Centered text — draw at the center of the screen
const centered = rapid.texture.createTextTexture({
  text: "Game Over",
  fontSize: 48,
  fill: "#ffffff",
  align: "center",
  baseline: "middle",
});
// The texture draws centered on (400, 300)
rapid.drawSprite({ texture: centered, x: 400, y: 300 });
Combine align: "center" with baseline: "middle" when you want a label to be exactly centred on a world position — the offsets cancel out the natural top-left anchor without any manual math on your end.

​
Drawing

TextTexture is a Texture subclass and can be passed directly to any Rapid.js draw call. 
rapid.drawSprite({ texture: label, x: 400, y: 300 });

​
Live Updates

// Text setter — re-uploads texture automatically
label.text = `Score: ${score}`;

// Style setter — partial update, re-uploads
label.style = { fill: "#ffd700", fontSize: 36 };

​
Multi-line Text

Split text across multiple lines with the \n newline character. Line height and gap are measured using Canvas 2D fontBoundingBoxAscent and fontBoundingBoxDescent so spacing matches the actual font metrics. 
const info = rapid.texture.createTextTexture({
  text: "Level 1\nCollect all gems",
  fontSize: 20,
  fill: "#ffffff",
});

rapid.drawSprite({ texture: info, x: 20, y: 20 });

​
Destroying a TextTexture

TextTexture inherits destroy() from Texture. Call it when the label is no longer needed to release the GPU texture and decrement the BaseTexture reference count. 
label.destroy();

Build docs developers (and LLMs) love

Get started for freeTalk to us