SELECT TEXT FORMAT & LIVE PREVIEW
1. Complete & Detailed Technical Guide: How to Use Pixel Grid Canvas
Whether you are sketching retro 8-bit pixel sprites, tracing reference photographs into blocky art, mapping out 2D game labyrinths, or generating copy-pasteable Unicode text art for social media and web pages, Pixel Grid Canvas transforms your browser into a high-precision coordinate matrix studio. Engineered to render everything from compact 10x10 icons up to massive 50x50 and 100x100 (10,000-cell) grids at 60 frames per second, here is how every instrument on the deck works:
- 8 Selectable Grid Resolutions (
10x10to100x100): Use the Select Grid Dimension matrix in the right control panel to switch seamlessly between10x10,16x16,25x25,32x32,50x50,64x64,80x80, and100x100cells. - Auto-Square 30% Opacity Photo Tracing Guide (
UPLOAD PHOTO): Click the UPLOAD PHOTO button in the top-right bar (next to the sound icon) to load any image from your device (PNG, JPG, WEBP, SVG). The engine automatically performs a distortion-free 1:1 center square crop and renders your photo underneath the grid lines at 30% opacity so you can trace portraits, logos, or floorplans cell by cell without aspect-ratio stretching. Click CLEAR PHOTO anytime to remove the reference guide. - Four Precision Drawing Instruments (
Pen,Eraser,Line,Box):- Pen & Eraser: Click and drag across the grid to paint continuous pixel strokes powered by Bresenham line interpolation—ensuring rapid mouse or touchscreen movements never leave broken gaps. Pro Tip: You can also Right-Click and drag at any time to erase cells instantly without switching tools.
- Line Tool: Click and drag to preview and snap straight horizontal, vertical, or diagonal walls—perfect for drawing clean maze corridors and geometric diagrams.
- Box (Rectangle) Tool: Click and drag from corner to corner to frame rectangular rooms, borders, and enclosures in a single stroke.
- Interactive Text Export Popup & PNG Capture (
CAPTURE PNG© TEXT): Located directly below the Live Telemetry HUD in the right panel, click COPY TEXT to open the large Format & Live Preview Popup where you can switch between 4 text encodings in real time, adjust the preview zoom, and copy your artwork—or click CAPTURE PNG to download a clean image file (automatically excluding the 30% tracing photo).
2. Grid Resolution & Canvas Density Reference Chart
Selecting the optimal matrix dimension depends on whether you are creating compact chat art, tracing a portrait, or drawing intricate labyrinths:
| Grid Dimension | Total Matrix Cells | Best Text Copy Format | Ideal Creative & Tracing Use Case |
|---|---|---|---|
10x10 / 16x16 |
100 - 256 Cells |
Color Emoji / Block Art |
Favicons, retro 8-bit character sprites, and compact emoji grid art for mobile chat apps. |
25x25 / 32x32 |
625 - 1,024 Cells |
Block Art / ASCII Maze |
Tracing simple logos, game icons, QR-style patterns, and medium hand-drawn mazes. |
50x50 / 64x64 |
2,500 - 4,096 Cells |
Braille HD / ASCII Maze |
Tracing detailed portraits with the 30% photo overlay, dungeon RPG maps, and complex labyrinths. |
80x80 / 100x100 |
6,400 - 10,000 Cells |
Braille HD + Capture PNG |
High-resolution photo tracing, architectural schematics, and marathon maze puzzles. |
3. Inside the Copy Text Popup: 4 Text Export Formats Explained
When you click the red COPY TEXT button below the telemetry panel, the interactive preview modal lets you inspect and compare four distinct plain-text encodings before copying:
| Text Export Mode | Character Encoding | Where to Paste & How It Works |
|---|---|---|
| Block Art (Full/Light) | U+2588 & U+2591 |
Uses solid Unicode full blocks for painted cells and light shade blocks for empty space; renders cleanly in monospace editors, forums, and HTML <pre> tags. |
| Braille HD (Compact) | U+2800 - U+28FF |
Packs a 2x4 cluster of grid cells into a single 8-dot Unicode Braille character—compressing a 50x50 canvas into a compact 25x13 text block that fits inside narrow chat boxes. |
ASCII Maze (# / .) |
# and . |
Universal plain-text format using # for walls/ink and . for open corridors; compatible with 100% of text editors, markdown docs, and codebases. |
| Color Emoji Squares | Unicode Color Squares | Maps each of the 8 palette colors directly to its matching colored square emoji so multi-color pixel art can be pasted into WhatsApp, Telegram, Discord, or social posts. |
4. Frequently Asked Questions (FAQ)
How does the Auto-Square 30% Opacity Photo Upload work?
When you click UPLOAD PHOTO in the top bar, our image processor calculates the largest centered 1:1 square region from your photo so portrait or landscape pictures are never squished or distorted. That square crop is rendered underneath the grid mesh at 30% opacity, allowing you to trace outlines and shading accurately. When you click CAPTURE PNG, only your drawn pixel cells are exported.
Can I undo a mistake while tracing or drawing a maze?
Yes. Click the UNDO (CTRL+Z) button at the bottom-right of the canvas—or press Ctrl + Z (Cmd + Z on Mac) on your keyboard—to step backward through your last 25 brush strokes.