How the ASCII art camera works

Each video frame is drawn to a hidden HTML5 canvas. The canvas is divided into a grid of blocks, and the average brightness of each block is mapped to an ASCII character - darker areas get dense symbols like @ or #, while lighter areas get sparse ones like . or .

Tips for great ASCII art

High-contrast subjects with strong lighting produce the clearest output.
Lower the column count for a chunky, retro look; raise it for fine detail.
Toggle Invert for a light-on-dark or dark-on-light style.

Privacy

Your camera feed is processed entirely on the canvas in your browser. No video data leaves your device.

ASCII brightness ramp

The conversion maps pixel brightness (0–255) to characters arranged from densest (darkest) to sparsest (lightest). A typical ramp from dark to light looks like:

@#S%?*+;:,.

Denser characters have more ink per cell and appear darker at a distance. The exact ramp used by this tool is tunable via the contrast and invert controls - experimenting with different ramps dramatically changes the aesthetic of the output.

Historical context

ASCII art originated in the 1960s and 1970s when early terminals and line printers could only output text characters. Artists arranged these characters to create images, portraits, and landscapes. The form peaked in the 1980s–1990s with BBS (Bulletin Board System) culture and ANSI art. Today ASCII art is used in README files, terminal splash screens, developer humor, and creative coding projects.

Export tips

Copy the ASCII output and paste it into a code block in Markdown (``` fences) or a <pre> tag in HTML to preserve spacing.
Always use a monospace font when displaying ASCII art - proportional fonts break the alignment because characters have different widths.
For sharing on social media, take a screenshot of the rendered output rather than pasting the raw text, since most social platforms use proportional fonts.