BitmapText.js - Transform Behavior Demo

Key Insight: BitmapText IGNORES all context transforms (scale, translate, rotate). Coordinates are always ABSOLUTE from canvas origin (0,0).

Without Transforms

// No transforms
BitmapText.drawTextFromAtlas(
  ctx, "Hello", 10, 50, fontProps
);
// Renders at (10, 50)

With Scale + Translate

ctx.scale(1.5, 1.5);
ctx.translate(50, 30);
BitmapText.drawTextFromAtlas(
  ctx, "Hello", 10, 50, fontProps
);
// STILL renders at (10, 50)!
// Transforms are IGNORED

HTML5 Canvas fillText (for comparison)

ctx.scale(1.5, 1.5);
ctx.translate(50, 30);
ctx.fillText("Hello", 10, 50);
// Renders at transformed position
// (1.5 × (10 + 50), 1.5 × (50 + 30))
// = (90, 120)

BitmapText with Manual Offset

// To offset BitmapText, calculate manually:
const offsetX = 50;
const offsetY = 30;
BitmapText.drawTextFromAtlas(
  ctx, "Hello", 10 + offsetX, 50 + offsetY
);
// Renders at (60, 80)