One generic canvas markup layer beats per-lesson draw code

When adding visual teaching diagrams on top of an existing canvas board/grid renderer, resist writing draw code per lesson. Add ONE markup layer to the renderer (highlight halo, letter/number labels, triangle/square/cross) and pick each glyph ink by what sits under the point — light on a dark token, dark on a light token, accent on empty background — exposed via a controller like setMarkup()/setTerritory(). Then every lesson becomes pure data: stepped {tokens, marks:[{at,type,label,tone}], caption}, which you can validate in a plain unit test (coords in range, no overlaps) and exercise the renderer with a mock 2D context (record fillText/save/restore calls) so you get real coverage without a browser. Also: a step-dialog that closes on the last step feels abrupt; refill one dialog shell in place and advance to the next item (tear down the old canvas + ResizeObserver first) so users flow through a sequence.