# Canvas rendering notes Small, durable technical facts about drawing on `` in this project, worth knowing before reaching for a glyph-based shortcut in `canvas.ts`. ## Color emoji ignore fillStyle/strokeStyle `ctx.fillText` with a color-emoji character (crown 👑, skull 💀, etc.) draws a fixed-color bitmap glyph from the system emoji font. `ctx.fillStyle` and `ctx.strokeStyle` have no effect on it — the glyph's own built-in colors win regardless of what's set on the context. This makes color emoji a bad fit for anything that needs guaranteed contrast against a variable background (e.g. an emblem that must read on all four player colors, including white) or a fixed brand color. Discovered 2026-09-06 while choosing how to draw the home base crown/skull emblem (`docs/tasks/2026-09-06/11-home-base-presentation.md`). Resolved by hand-drawing both emblems as simple `ctx.beginPath`/`fill`/`stroke` vector paths instead of text glyphs — slightly more code, but full control over both fill and stroke color, which a plain (non-color, text-presentation) glyph might have given too, but color-emoji fallback risk across browsers/fonts made that unreliable enough not to chase. Relevant to any future canvas work that reaches for a glyph as a shortcut (the side panel task, `docs/tasks/2026-09-06/10-side-panel-ui.md`, doesn't touch canvas, but a future emblem/icon need on the board would).