A code-to-image generator is a browser tool that paints inert source text onto a local HTML5 Canvas and exports the resulting bitmap as a PNG file. The Code to Image Generator follows that pattern exactly: paste complete code text, pick a fixed light or dark palette, choose a font size between 12 and 32 pixels and padding between 16 and 96 pixels, and download code-image.png from the natural-size Canvas. Every step — measurement, painting, PNG encoding, preview rendering, and download — happens inside the current browser tab. The input is never parsed, compiled, evaluated, syntax-highlighted, injected as HTML, or uploaded to a server. The output PNG stores rendered pixels only, using one foreground color over an opaque background, so there is no language-aware token coloring and no claim of cross-device pixel identity. This makes the tool well suited to compact visual sharing of snippets, documentation illustrations, issue reports, teaching material, and social posts where the goal is a clean, predictable image of code rather than editable source. It is not an editor, compiler, sandbox, formatter, OCR system, or accessibility replacement for selectable text.
What the Code to Image Generator actually does
The tool accepts plain text, treats every character as inert Canvas glyphs, and produces one PNG. The browser resolves a local monospace font stack — ui-monospace, SFMono-Regular, Menlo, Consolas, and a generic monospace fallback — then measures every complete logical line with Canvas measureText before allocating the bitmap. Each recognized line separator (LF, CRLF, or CR) advances to a new row, so a final trailing line break still consumes its row even though it paints no glyph. Empty lines consume their full row as well. The complete Canvas is painted with the selected opaque background before any text is drawn, then every preserved line is rendered left-aligned from the same padded position with a top baseline using Canvas fillText. Because the context is reconfigured after every resize and the bitmap is encoded from the natural-size offscreen Canvas rather than from any CSS-scaled preview, the downloaded file is not silently downsampled to fit the page.
Three controls define the image: a fixed light or dark palette, a font size as an integer from 12 to 32 pixels, and padding as an integer from 16 to 96 pixels. Line height is the ceiling of one and one-half times the chosen font size, applied uniformly to every logical line. Width is the largest measured line width plus padding on both sides, and height is the line height multiplied by the complete line count plus top and bottom padding. After the Canvas is resized, the drawing context is reacquired and font, baseline, alignment, direction, kerning, background, and foreground are explicitly reapplied before drawing, because resizing resets Canvas state.
Hard limits and what gets rejected
Strict resource caps protect the browser tab before large Canvas allocations occur. Each cap is checked individually and the next unit, line, edge pixel, total pixel, or byte past the limit is rejected. There is no automatic clamp, no skipped-line count, no cropped region, no partial image, no lower-resolution retry, and no silent recompression. The exact limits are documented in the table below.
| Resource | Accepted limit | Behavior when exceeded |
|---|---|---|
| Total input size | 50,000 UTF-16 code units | Rejected with an explicit error |
| Logical line count | 200 lines | Rejected with an explicit error |
| Per-line length | 2,000 code units on any one line | Rejected with an explicit error |
| Canvas width or height | 8,192 pixels per edge | Rejected before allocation |
| Total pixel area | 32,000,000 pixels | Rejected before allocation |
| PNG Blob size | 20 MiB | Rejected after encoding |
| Disallowed controls and unpaired surrogates | None accepted | Rejected with an explicit error |
Accepted text is never silently shortened, and tabs plus printable Unicode are passed to the Canvas text renderer unchanged. Disallowed control characters and unpaired Unicode surrogates are refused outright instead of being replaced or lost. If Canvas is unavailable, a measurement is invalid, dimensions exceed a budget, PNG encoding returns null, the PNG size is invalid or excessive, or ObjectURL creation fails, the current generation reports an error and publishes no download. The previous successful output is already gone before work begins.
Generate code to image in three steps
- Paste the complete inert code text within the character, line, and per-line limits. Empty lines and a final trailing line break remain represented as image rows, so leave the text exactly as you want it rendered.
- Choose a light or dark theme, a font size between 12 and 32 pixels, and padding between 16 and 96 pixels. Each control accepts a fixed whole-number value and is revalidated on every change, which invalidates any earlier generation immediately.
- Check the preview, the reported actual dimensions, the logical line count, and the PNG byte size, then download code-image.png. The exported PNG comes from the natural-size offscreen Canvas, so the file matches the reported dimensions exactly.
While a generation is in progress, the generate button stays disabled only until the active toBlob callback resolves. PNG encoding is asynchronous, so a generation identifier and a mounted-state guard prevent an older callback from replacing a newer result or publishing after unmount. If a stale callback creates a URL before it detects replacement, that URL is revoked immediately, and the current result URL is revoked on edit, replacement, and component cleanup.
Preview, dimensions, and the exported PNG
The on-screen preview constrains only display size; the downloaded PNG is rendered from a separate offscreen Canvas at its natural output dimensions. The result summary reports the dimensions actually assigned to that Canvas, so the numbers you see match the file you save. The options that shape the bitmap are summarized below.
| Option | Allowed values | Effect on output |
|---|---|---|
| Theme | Light or dark (fixed palette) | Light paints a pale background with dark foreground; dark paints a dark background with light foreground |
| Font size | Integer from 12 to 32 px | Sets Canvas font and line height for every preserved line |
| Padding | Integer from 16 to 96 px | Horizontal and vertical inset applied to both sides of the content |
Because the browser resolves the monospace stack from locally available fonts, font fallback and glyph shape can vary between operating systems. The same browser and font environment should produce stable measurements for the same input and options, but pixel-identical output across computers is not promised. Emoji, uncommon scripts, ligatures, antialiasing, hinting, and fallback fonts can change the measured width or the rasterized glyph edges, so treat the PNG as a visual snapshot rather than a deterministic fingerprint.
Why the PNG contains pixels, not source
The exported file is a PNG image of rendered glyphs, not a copy of the source text. The PNG contains no editable source, no syntax structure, no font files, no runtime output, no execution results, and no machine-readable string. It does not prove the code is correct, secure, licensed, formatted, or runnable, and it cannot be converted back into a selectable block of source without separate OCR. For anything that depends on editability, exact character recovery, review history, accessibility, or archival fidelity, keep the original text in a normal file and reach for a formatter, minifier, or validator instead.
All measurement, painting, PNG encoding, previewing, and downloading happen locally, and nothing is sent to a remote service. Because all drawn material is local text and solid colors, the Canvas has no cross-origin image source and does not become tainted through this workflow. Review the pasted snippet for credentials, tokens, private URLs, and personal information before sharing the PNG, since the image makes that text visually permanent in a way that is harder to redact than a plain string.
When to reach for a formatter instead
If the goal is machine-readable formatting rather than a visual snapshot, the right tool is a dedicated formatter or minifier. For example, JSON Formatter produces pretty-printed or compressed JSON with pinpoint error locations, while HTML Formatter, CSS Minifier, and JavaScript Minifier cover the other common web formats. Code to Image is intentionally narrower than those tools: one fixed palette, one foreground color, no language-aware token coloring, and an output that is read-only by design. Use it when the deliverable is a clean, bounded PNG of text that will be embedded in documentation, attached to an issue, shared on a social post, or dropped into a slide deck.