Meme Generator

Why text on a canvas needs wrapping code

A canvas draws exactly the string it is given, on one line, however long that string is — it has no concept of a text box or of flowing content. Anything longer than the canvas simply extends past the edge and is lost. Wrapping therefore has to be done by the calling code: split the text into words, accumulate them into lines, and break when a line would exceed the available width. Doing this accurately requires measuring each candidate line in the actual font, which needs a rendering context. Where that context is not available — as here, because the wrapping decision is made before the worker starts drawing — an estimate based on average character width is the alternative. Erring narrow means occasional early breaks rather than text running off the image, which is the right way round.

Anchoring multi-line text

Canvas text is positioned by a single anchor point, and a multi-line block is centred vertically on that point. This creates a subtlety that is easy to miss: as a caption wraps onto more lines, the block grows in both directions from its anchor, so an anchor fixed near the top edge pushes the first line off the image entirely once the caption is long enough. The fix is to move the anchor down by half the block height as lines are added, which keeps the top of the block a constant distance from the edge regardless of how many lines there are. The same applies inverted at the bottom. Both behaviours are pinned by tests, because the failure only appears with captions long enough that nobody tries them by accident.

Relative sizing across resolutions

Specifying caption size in pixels breaks immediately: forty pixels is enormous on a thumbnail and invisible on a photograph from a modern camera. Sizing as a percentage of the image’s smaller dimension keeps the visual proportion constant, which is why the preview and the export agree even though one is displayed at a few hundred pixels wide and the other rendered at several thousand. The smaller side rather than the width is used because it is the dimension that constrains how much vertical room the captions have, and because it behaves sensibly for portrait images where the width alone would under-size the text.