Canvas rendering notes #

Small, durable technical facts about drawing on <canvas> 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).