Banner Text Generator

Text banners serve as the primary visual anchor for websites, social media headers, presentation slides, and print materials. A misaligned baseline, poor contrast ratio, or wrong aspect ratio renders the banner unreadable at small viewport sizes. This generator computes word-wrap boundaries by measuring each glyph cluster against the canvas width using the measureText() API, ensuring line breaks occur at whitespace boundaries rather than mid-word. Background gradients are interpolated across n color stops using linear interpolation along the horizontal or vertical axis. The tool targets common banner dimensions: 1200×630 px for Open Graph, 1500×500 px for Twitter headers, and arbitrary custom sizes up to 4096 px.

Limitations apply: the generator uses system-installed and web-safe fonts only. Kerning precision depends on the browser's Canvas text shaping engine. Transparent PNG export is supported, but JPEG fallback discards alpha. Pro tip: for social media, keep critical text within the center 80% of the canvas to avoid cropping on mobile feeds.

The generator computes line breaks using a greedy word-wrap algorithm. For a given canvas width W, horizontal padding p, and a text string split into words w_i, each line accumulates words until the measured pixel width exceeds the available space:

Vertical centering of n text lines uses the total text block height and canvas height H:

where lineHeight = fontSize × 1.3 (default multiplier). Gradient backgrounds interpolate between color stops c₀ and c₁ across the canvas diagonal or axis. Text shadow offset is defined by dx, dy in pixels with blur radius r. Outline text uses strokeText rendered before fillText at the same coordinates, with stroke width s.