v136 · graphics
Locale Font Tester
Test how ctx.lang changes glyph selection for locale-sensitive text. Enter any string, pick a font, and the tester renders it across multiple BCP-47 language tags — including an empty baseline — letting you see whether your font stack produces the correct locale variants for CJK Han Unification, Arabic shaping, and other scripts.
checking ctx.lang support…
Chrome 136 adds
CanvasTextDrawingStyles.lang. Without it, an OffscreenCanvas worker has no way to specify locale — it inherits nothing from the DOM. With ctx.lang = "zh-Hans", the canvas picks Chinese-Simplified glyph variants from a CJK font that has regional alternates. Han Unification means the same Unicode code point renders differently per locale.
Presets
Locale comparison
ctx.lang API pattern
// In main thread: inherit lang from DOM element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx.lang defaults to the canvas element's lang attribute or
// the document language — no explicit set needed in most cases
// In worker: OffscreenCanvas has NO DOM to inherit from
// Before Chrome 136: no way to set locale → wrong glyphs
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('renderer.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
// In renderer.js (worker) — Chrome 136+:
self.onmessage = ({ data: { canvas } }) => {
const ctx = canvas.getContext('2d');
ctx.lang = 'zh-Hans'; // ← new in Chrome 136 ✓
ctx.font = '32px serif';
ctx.fillText('骨', 20, 40);
// Now renders Chinese-Simplified glyph, not default
};
// Available on both CanvasRenderingContext2D and
// OffscreenCanvasRenderingContext2D