About

Placing text along a curved path requires computing angular offsets for each glyph relative to a circle of radius R. Miscalculating the cumulative arc length causes characters to overlap or gap unevenly. This tool maps each character to a position on a circular arc defined by bend angle θ, measuring individual glyph widths via the Canvas measureText() API to distribute them proportionally. The result is optically correct curved typography without vector editing software.

The radius is derived inversely from bend intensity: a small θ yields a large R (gentle curve), while θ approaching 360° wraps text into a full circle. Note: kerning approximation uses metric widths only. Ligature-heavy typefaces or complex scripts (Arabic, Devanagari) may render incorrectly. For production signage, verify output against your target renderer.

Formulas

Each character is positioned along a circular arc of radius R. The radius is computed from the total text arc width W (sum of all glyph widths plus spacing) and the user-specified bend angle θ:

R = Wθ

where θ is in radians. For character i, its angular position φ_i relative to the arc midpoint is:

φ_i = d_i − W2R

where d_i is the cumulative distance to the center of glyph i. The Cartesian coordinates on the canvas become:

x_i = R ⋅ sin(φ_i)

y_i = R ⋅ (1 − cos(φ_i))

Each glyph is then rotated by φ_i so its baseline remains tangent to the arc. For downward bends, the sign of R is inverted, flipping the arc center above the text line.

Reference Data

Bend Angle θ	Visual Effect	Typical Use Case	Radius Factor
0°	Straight line (no bend)	Standard text	∞
15°	Subtle arch	Elegant headers	∼19W
30°	Gentle curve	Logo taglines	∼9.5W
45°	Moderate arc	Badge/emblem text	∼6.4W
60°	Pronounced curve	Seal inscriptions	∼4.8W
90°	Quarter circle	Circular logos (top)	∼3.2W
120°	Wide arc	Stamp borders	∼2.4W
150°	Near-semicircle	Half-round labels	∼1.9W
180°	Semicircle	Classic badge top/bottom	∼1.6W
210°	Extended semicircle	Wraparound labels	∼1.4W
240°	Wide wrap	Circular signage	∼1.2W
270°	Three-quarter circle	Coin/medal text	∼1.06W
300°	Near-full circle	Clock faces	∼0.95W
330°	Almost closed	Decorative rings	∼0.87W
360°	Full circle	Complete circular text	∼0.8W

Frequently Asked Questions

At bend angles approaching 360°, the radius R shrinks proportionally. When R becomes smaller than the total text width W divided by 2π, characters physically cannot fit without overlapping. Reduce font size, letter spacing, or text length to resolve this.

Letter spacing is added to each glyph's measured width before computing the total arc width W. This means increasing spacing also increases the effective radius R at any given bend angle, producing a gentler curve. A spacing of 0 uses the font's natural metric widths only.

PNG export rasterizes the canvas at its current pixel dimensions. Scaling up later causes blur. SVG export generates vector markup with individually positioned and rotated text elements, preserving infinite scalability. For print work above 300 DPI, use SVG.

The tool uses system fonts available in your browser. The Canvas API can only render fonts that are loaded in the document. The preset list includes common cross-platform families. If a selected font is not installed on your system, the browser falls back to the default serif or sans-serif.

Downward bend flips the arc center above the text baseline, inverting the y-axis of the arc. Each character is rotated 180° relative to the upward case. The text reads left-to-right in both modes, but the curvature direction reverses. This matches the convention used in circular seal and badge design.

When enabled, the canvas is cleared without filling a background rectangle. The PNG alpha channel preserves transparency. Note: some image viewers display transparent regions as black or checkerboard. Open the file in a graphics editor to verify transparency.