Text drawing

This example loads a bundled font, prepares glyphs with Canvas 2D, and uploads reusable glyph textures to WebGPU. The live label changes without rebuilding one large label texture.

status: loading

ticks: 0

What you'll see

• A bundled font loaded through SvelteKit's base-aware asset helper.
• Digits, common symbols, uppercase letters, and lowercase letters rendered as glyphs.
• Typed font ownership through assets.load_font.
• Reusable glyph preparation in a live WebGPU canvas.
• A tick label that changes every frame.

Load a font

const font_handle = await assets.load_font(
  // Use SvelteKit's base-aware asset path for files in static/.
  `url("${asset("fonts/GeostarFill-Regular.ttf")}")`,
  { characters: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ", size: 28 },
);

const font = font_handle.read();

Draw text

renderer.draw_commands([
  {
    kind: "text",
    draw: {
      font,
      text: `Score: ${score}`,
      options: {
        x: 32,
        y: 32,
        size: 24,
        color: rgba(1, 0.82, 0.3, 1),
        opacity: 1,
      },
    },
  },
]);

Text API

FontOptions accepts characters, size, weight, style, and filtering options. TextDrawOptions accepts position, size, color, opacity, and the active camera transform. Font handles are owned resources: release the handle when the font is no longer needed, or let the game-owned asset cache clean it up during disposal.

Phase 2 intentionally does not promise wrapping, rich layout, shaping, fallback, or arbitrary-script coverage. Supported glyphs requested later are added to the non-evicting atlas until its typed 4096×4096 capacity limit is reached.