The Joy of Pixel Art
Pixel art is one of the most accessible and rewarding forms of digital art. Born from the hardware limitations of early computers and game consoles, it forces you to think about every single dot of color you place. Each pixel matters.
From the sprites of the NES era to modern indie games like Celeste and Shovel Knight, pixel art has proven itself as a timeless medium. The constraints of a small grid and limited palette don't restrict creativity - they amplify it.
Tools & Shortcuts
This editor comes with everything you need to create pixel art right in your browser:
Pen (D) - Draw pixels one at a time or drag to paint.
Eraser (E) - Remove pixels back to the background.
Fill Bucket (F) - Flood-fill a region with color.
Line (L) - Click and drag to draw a straight line
using Bresenham's algorithm.
Eyedropper (I) - Pick a color from the canvas.
Mirror Mode (M) - Everything you draw is mirrored
horizontally, great for characters and symmetrical designs.
Grid Toggle (G) - Show or hide the grid overlay.
Palette (P) - Browse curated palettes: Pico-8, Game
Boy, NES, Endesga 32, Pastel, and Grayscale.
Undo/Redo (Ctrl+Z / Ctrl+Shift+Z) - Step backwards
and forwards through your changes.
Save (Ctrl+S) - Export a clean PNG scaled up to
crisp pixels, no grid lines.
Canvas Sizes
Choose from 8x8 (great for tiny icons), 16x16 (classic sprite size), 32x32 (the default), 48x48, or 64x64 for more detailed pieces. The canvas resets when you change sizes, so save your work first!
Some Development Notes
This pixel art editor is built entirely with vanilla JavaScript and the HTML5 Canvas API. No dependencies, no build step. The flood fill uses a stack-based algorithm, lines use Bresenham's line algorithm, and the undo system tracks individual pixel changes for precise reversibility.
Exported images are rendered at 16x scale by default, so a 32x32 canvas exports as a crisp 512x512 PNG - perfect for sharing or using as sprites.