About

ASCII art loses fidelity when pasted across platforms. Character grids depend on monospace rendering, and a single font substitution collapses alignment. This tool rasterizes raw text onto an HTML Canvas at pixel-level precision, preserving every space, tab, and line break as a fixed bitmap. You control the typeface, the cell size via fontSize, foreground and background colors, and padding p in pixels. Output resolution scales at 2× device pixel ratio for retina clarity. The converter handles up to 50,000 characters and exports lossless PNG, lossy JPEG (with adjustable quality q ∈ [0.1, 1.0]), or WebP.

Approximation note: glyph metrics are measured via CanvasRenderingContext2D.measureText(), which may differ from browser text layout by ±1px on certain ligature-heavy fonts. For pixel-perfect ASCII art, use a strict monospace face such as Courier New or Consolas. Tab characters are expanded to 4 spaces internally to avoid inconsistent tab-stop widths across rendering engines.

Formulas

The canvas dimensions are computed from text metrics before any pixels are drawn. Each line of input is measured individually to find the widest span.

W_canvas = max(w_line₁, w_line₂, …, w_{line_n}) + 2 ⋅ p

H_canvas = n ⋅ fontSize ⋅ lineHeight + 2 ⋅ p

where w_{line_i} = ctx.measureText(line_i).width in pixels, n is total line count, p is padding in px, and lineHeight is a unitless multiplier (default 1.4).

The vertical offset for the i-th line of text:

y_i = p + i ⋅ fontSize ⋅ lineHeight + fontSize ⋅ 0.8

The 0.8 factor approximates the ascent ratio for Latin glyphs, aligning baselines correctly. For retina output, all coordinates are multiplied by the device pixel ratio dpr = 2, while CSS dimensions remain at 1×.

Reference Data

Font Family	Type	Monospace	Recommended For	Platform Availability
Courier New	Serif Mono	Yes	Classic ASCII art	Windows, macOS, Linux
Consolas	Sans Mono	Yes	Code & box-drawing chars	Windows (bundled)
Monaco	Sans Mono	Yes	Compact ASCII	macOS (bundled)
Menlo	Sans Mono	Yes	Terminal output	macOS (bundled)
Liberation Mono	Sans Mono	Yes	Linux default mono	Linux (bundled)
Lucida Console	Sans Mono	Yes	Legacy Windows art	Windows (bundled)
Source Code Pro	Sans Mono	Yes	Modern ASCII, wide glyphs	Adobe (free, web)
DejaVu Sans Mono	Sans Mono	Yes	Unicode box-drawing	Linux (bundled)
Fira Code	Sans Mono	Yes	Ligature-aware art	Google Fonts (free)
monospace (generic)	System	Yes	Fallback safe option	All platforms
Arial	Sans	No	Proportional text banners	All platforms
Georgia	Serif	No	Elegant text renders	All platforms
Verdana	Sans	No	High-readability text	All platforms
Times New Roman	Serif	No	Document-style output	All platforms
Impact	Sans	No	Bold headlines & memes	Windows, macOS

Frequently Asked Questions

ASCII art depends on every character occupying the same horizontal width. If you select a proportional font like Arial, characters like "i" and "W" have different widths, breaking column alignment. Always use a monospace font (Courier New, Consolas, or the generic "monospace" option) for art that relies on spatial alignment.

The tool accepts up to 50,000 characters. Canvas dimensions are capped at 16,384 × 16,384 pixels per the HTML Canvas spec in most browsers. If your text at the chosen font size would exceed that, reduce the font size or split the art into sections. The tool warns you if the computed dimensions exceed the safe limit.

PNG is lossless and ignores the quality slider. For JPEG and WebP, quality (q) ranges from 0.1 to 1.0. At q = 1.0, JPEG files are roughly 10-15× larger than at q = 0.5 with minimal perceptual difference for text. WebP at q = 0.8 typically produces files 30-40% smaller than JPEG at the same perceptual quality. For ASCII art with flat colors, PNG is usually smallest because the compression exploits uniform regions.

Yes. Enable the "Transparent Background" toggle, which skips the fillRect step. Only PNG and WebP support alpha channels. If you export as JPEG with transparency enabled, the background defaults to white because JPEG does not support alpha.

The canvas internal resolution is doubled (width × 2, height × 2), and the drawing context is scaled by 2 using ctx.scale(2, 2). The CSS display size stays at 1×. When exported, the image file contains the full 2× resolution, producing sharp text on high-DPI screens and in print. You can disable this via the DPR toggle to get 1× output for smaller files.

Tabs are expanded to 4 spaces before rendering because Canvas fillText does not interpret tab stops. This ensures consistent spacing regardless of browser. If your art uses a different tab width, adjust the source text before pasting.