Canvas ASCII Art Converter — Free Live Pixel-to-Character Demo

ASCII art conversion is the classic canvas exercise that never gets old: take an image, read its pixel brightness in a grid, and swap every cell for a character whose visual weight matches that brightness. This snippet builds the whole pipeline from scratch with the 2D canvas API — no image upload, no external asset, and no library — by first painting a procedural "source image" onto an offscreen canvas and then sampling it.

A source image with nothing to load

Because a sandboxed snippet has nowhere reliable to host a photo, paintSourceImage() draws one instead: a vertical sky gradient, a radial-gradient sun with real falloff, a jagged mountain silhouette built from a sine-perturbed polygon, and a scatter of star dots. The point isn't the scene itself — it's that the source has genuine light-to-dark range for the sampler to react to, the same way a real photo would.

Sampling with getImageData

sctx.getImageData(0, 0, W, H).data returns a flat array of RGBA bytes, four per pixel. The render loop walks the canvas in cell-sized steps, looks up the pixel at each cell's top-left corner, and converts it to brightness with the standard luminance weighting r * 0.299 + g * 0.587 + b * 0.114. That single formula is doing the real work: it accounts for the eye being more sensitive to green than red or blue, so the resulting brightness value tracks perceived lightness rather than raw pixel average.

Mapping brightness to a character ramp

Each ramp — from " .:-=+*#%@" for a classic terminal look to block glyphs or plain binary — is ordered from visually lightest to densest. Math.floor(brightness * (ramp.length - 1)) picks an index along that ramp, so bright pixels become sparse punctuation and dark pixels become dense glyphs (or vice versa, depending on which end you treat as "ink"). The character is then drawn with ctx.fillText directly at the cell's coordinates, so the ASCII output lives entirely on the same canvas — no overlaid <pre> block, no HTML text nodes to keep in sync.

Density as a live control

The detail slider changes cell — the sampling and glyph size — from 4px (fine detail, more characters, closer to the source image) up to 16px (chunky, poster-like). Because render() re-samples and redraws from scratch on every change, dragging the slider gives instant, correct feedback rather than an approximation. The ramp selector swaps the character set entirely, which changes not just the look but the perceived contrast, since block glyphs read as much denser at the same brightness threshold than punctuation does.

Extending it

Swap the procedural source for a real <img> drawn with ctx.drawImage (still same-origin or CORS-enabled) to convert actual photos; add color by keeping the sampled RGB instead of forcing green; or drive the source from a live video element for a real-time ASCII webcam feed. Pair it with a matrix rain background for a retro terminal page, or a noise background for a grittier texture layer underneath.