Curving text around a circle with a canvas, and why it breaks for ovals

One of the office tools in our own admin dashboard is a stamp designer — the kind of thing that draws a circular or oval ink stamp with curved text around the border, the way a real rubber stamp reads. It's a small feature, but it's a good example of a problem that looks simple ("just curve the text") until you actually try to draw it.

The rotate-translate technique

You can't bend a line of text along a curve directly — a canvas draws glyphs in a straight line. The classic trick is to draw one character at a time: rotate the canvas's coordinate system by a small angle, translate out to the radius of the circle, draw a single character, then undo the rotation and repeat for the next character at a slightly larger angle. Do that for every character in the label and the result reads as smoothly curved text, even though every individual glyph was drawn perfectly straight — it's the accumulated small rotations between characters that create the curve, not anything bent about the glyphs themselves.

Where it breaks

The border of an oval stamp uses a different trick: scale the whole canvas non-uniformly (squash it vertically, say), draw a plain circle with the normal circle-drawing function, then unscale. Because path math (draw a circle here) survives being viewed through a stretched coordinate system just fine, that circle comes out looking like an ellipse once you unscale. It's a neat, cheap way to get oval geometry using only circle-drawing code.

Try to combine both tricks — curved text inside an anisotropically scaled (squashed) coordinate space — and it falls apart. Rotating a character inside a coordinate system that's been stretched more in one direction than the other doesn't just move the character, it shears it, the same way a rotated square looks like a parallelogram if you'd already stretched the paper it's drawn on unevenly before rotating. The border still looks like a clean ellipse, because a path was never rotated inside that stretched space — only scaled and unscaled. But text needs actual per-character rotation, and that's exactly the operation that doesn't survive the trip.

The honest fix wasn't a cleverer transform — it was recognizing the two shapes need different treatment. Circular stamps get proper curved text, using the rotate-translate technique. Oval stamps get straight horizontal labels placed above and below the border instead, rather than forcing curved text through a transform that quietly distorts it. Sometimes the right answer to "how do I make this technique handle one more case" is that it doesn't, and the design should say so rather than ship subtly warped text nobody asked for.