How to use it
- Pick a size under Canvas (16, 32 and 64 are one tap; anything from 1 to 128 on each side works) and press Set size. Making the grid smaller crops from the right and bottom; nothing else moves.
- Choose a colour from the palette, the colour picker or by typing a hex code, then draw. Pencil and Eraser paint while you drag, Line and Rectangle show the shape until you let go, Fill floods the area you tap, and Pick colour copies a colour from the drawing.
- Turn on Mirror ↔ or Mirror ↕ (or both) to draw symmetrical sprites: every cell you paint is copied across the middle.
- Undo and redo go back up to 100 steps (Ctrl+Z, Ctrl+Y). Flip and the arrow buttons move the whole drawing; arrows wrap around the edges, which helps with repeating tiles.
- Under Save, pick a scale and download a PNG, or an SVG. Your drawing and recent colours stay in this browser between visits.
How the drawing tools decide which cells to paint
Fill spreads to cells that touch along an edge and have exactly the same colour, never diagonally, so a one-pixel diagonal outline is enough to hold it in, the way classic pixel editors behave. Line uses Bresenham’s algorithm from 1965: one cell per step along the longer direction, choosing the cell closest to the true line, which gives the single-pixel staircase lines pixel art is built from. The pencil draws the same kind of line between the points your mouse or finger reports, because browsers only report a pointer position every few milliseconds and a quick stroke would otherwise come out as dots.
Why exports use whole-number scales
A 16 × 16 sprite is tiny on a modern screen, so you will want it larger, and the only way to enlarge pixel art without blurring or distorting it is to make every pixel the same whole number of screen pixels. The PNG export does exactly that: at 10× each cell becomes a solid 10 × 10 block. We measured what happens otherwise: in Chromium, a stripe of 16 alternating black and white pixels shown with image-rendering: pixelated at 3× came out as 16 columns all 3 pixels wide, but at 2.5× the columns alternated 3 and 2 pixels wide, so a checkerboard turns lumpy. If you put the art on a web page, scale it by a whole number and add image-rendering: pixelated, which Chrome has supported since version 41, Safari since 10 and Firefox since 93 (MDN browser data).
The SVG export stores one rectangle per run of same-coloured cells in a row and tells browsers to draw crisp edges, so it stays sharp at any size; it is handy for laser cutters, embroidery software and design tools that prefer vectors.
Importing a picture
Import shrinks an image to the current grid by averaging all the image pixels that fall in each cell, weighting colours by how opaque they are; a cell whose block is less than half opaque stays empty. A picture that is already pixel art, enlarged by a whole number, comes back exactly. A photo becomes a blurry mosaic with hundreds of colours, which is a starting point for tracing rather than finished art.
What we tested
On October 15, 2026, in Chromium 141.0.7390.37. Our first test run caught a real bug: a quick pencil stroke left gaps, because the update read the pointer’s new position for both ends of each segment. It is fixed, and the test now covers it.
| Check | What we did | Result |
|---|---|---|
| Fill | 400 random grids up to 24 × 24, random start and colour | Same result as a separate Python flood fill every time |
| Lines | Every pair of cells in a 12 × 12 grid (20,736 lines) | All include both ends, are unbroken, take one cell per step and stay within half a cell of the true line |
| Rectangles | 300 random outlines and filled boxes | Exactly the expected cells |
| Drawing | Fast pencil drag (mouse samples 4 cells apart); rectangle then fill; mirror; undo, redo; colour picker; reload | Line unbroken; fill stayed inside; every check passed; drawing kept after reload |
| PNG | 16 × 16 drawing at 10× | 160 × 160 px; all 256 blocks one exact colour, empty cells transparent |
| SVG | Same drawing, drawn by Chromium at 160 px | 20 rectangles; identical to the PNG pixel for pixel |
| Import | 8 × 8 pattern with transparent cells, enlarged 10× | Came back exactly |
| Phone | 390 px screen, finger swipe across 16 cells | 16 cells painted, no sideways scrolling, 0 page errors |
Tips
- Start small. 16 × 16 and 32 × 32 are the classic sprite and icon sizes, and a limited palette reads better than many similar shades.
- Draw the outline in a dark colour first, then use Fill for the large areas.
- Use Mirror ↔ for characters and faces, then break the symmetry by hand for a more natural pose.
- Pick the export scale from where the art is going: 1× for game engines that scale it themselves, 8× to 16× for social posts and prints.
Sources
Checked on .
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools