Text (Canvas)

The Text class renders styled strings by rasterizing them through the browser's Canvas 2D text API, then uploading the result as a GPU texture. The text behaves like a sprite after that: you can move, rotate, scale, and mask it.

The tradeoff: every time you change the text string or style, PixiJS must re-rasterize and re-upload. This makes Text a poor choice for content that changes every frame (use BitmapText instead).

import { Text, TextStyle, Assets } from 'pixi.js';

// Load font before use
await Assets.load({
    src: 'my-font.woff2',
    data: {
        family: 'MyFont', // optional
    }
});


const myText = new Text({
    text: 'Hello PixiJS!',
    style: {
      fill: '#ffffff',
      fontSize: 36,
      fontFamily: 'MyFont',
    },
    anchor: 0.5
});

app.stage.addChild(myText);
Copy

Text styling

The TextStyle class customizes text appearance. Available properties include:

• fontFamily
• fontSize
• fontWeight
• fill (color)
• align
• stroke (outline)

See the guide on TextStyle for more details.

Changing text dynamically

You can update the text string or its style at runtime:

text.text = 'Updated!';
text.style.fontSize = 40; // Triggers re-render
Copy

Text resolution

The resolution property determines the pixel density of rendered text. It defaults to the renderer's resolution.

You can set text resolution independently for sharper text on high-DPI displays.

const myText = new Text({
  text: 'Hello',
  resolution: 2, // Higher resolution for sharper text,
  style: {}
});

// change resolution
myText.resolution = 1; // Reset to default
Copy

Mipmaps

Set autoGenerateMipmaps to improve rendering quality when text is scaled down. Without mipmaps, downscaled text can appear noisy or shimmer during animation.

const text = new Text({
    text: 'Smooth when small',
    style: { fontSize: 48 },
    autoGenerateMipmaps: true,
});
Copy

When enabled, the text texture is allocated from a separate mipmap-enabled pool, so it won't interfere with non-mipmapped textures used by filters or other systems.

Font loading

PixiJS loads custom fonts via the Assets API. Supported formats:

• woff
• woff2
• ttf
• otf

Use woff2 for the best performance and compression.

await Assets.load({
  src: 'my-font.woff2',
  data: {},
});
Copy

Below is a list of properties you can pass in the data object when loading a font:

Property	Description
family	The font family name.
display	Controls font loading behavior (e.g., 'swap', 'block'). Maps to FontFace.display.
featureSettings	OpenType feature settings (e.g., '"liga" 1'). Maps to FontFace.featureSettings.
stretch	Font stretch (e.g., 'condensed'). Maps to FontFace.stretch.
style	Font style (e.g., 'italic'). Maps to FontFace.style.
unicodeRange	Limits which characters this font covers (e.g., 'U+0025-00FF'). Maps to FontFace.unicodeRange.
variant	Font variant (e.g., 'small-caps'). Maps to FontFace.variant.
weights	Font weight values. Maps to FontFace.weight.

---

API reference

• Text
• TextStyle
• FillStyle
• StrokeStyle