Pixel art editor guide

Every control

Every tool and control, top to bottom. History and Export start closed; tap their titles to open them.

1xButton: Saves a PNG with one pixel per square: 16 × 16 pixels for a 16 × 16 grid.
4xButton: Saves a PNG with each square as a 4 × 4 block of pixels.
8xButton: Saves a PNG with each square as an 8 × 8 block of pixels.
16xButton: Saves a PNG with each square as a 16 × 16 block of pixels. See nearest-neighbour scaling.
CopyButton: Copies the drawing to the clipboard as a PNG at 4x. See clipboard.

The eight tools, in three groups: Draw, Shape and Navigate. The one you picked is lit. Each tool has a key; see Keys.

PencilButton: Paints squares in the colour you picked as you drag. It is the tool the page opens with. See pencil.
EraserButton: Empties squares as you drag, so they are see-through again.
FillButton: Fills every square that touches the one you tap, across or up and down, and has the same colour. Tapping an empty square fills the empty area around it. See flood fill.
EyedropperButton: Tap a filled square to draw with its colour. An empty square gives nothing. The tool stays picked. See eyedropper.
LineButton: Draws a straight line from where you press to where you let go, one square per step. See line tool.
RectangleButton: Draws a rectangle from one corner, where you press, to the other, where you let go.
CircleButton: Press at the centre and drag outward. The radius is the longer of the distances across and down.
MoveButton: Drag to slide the view of the grid. The drawing itself stays where it is on the grid.

At the top, a colour box opens your browser's colour picker, and the hex code of the colour you draw with sits beside it.

Brush sizeSlider · 1 to 8 · starts at 1: How many squares wide the Pencil and the Eraser are. The block is centred on the pointer; at an even size it reaches one square further up and to the left. Fill and the shapes always use one square.
Recent colorsFilled in by the tool: The last eight colours you started a Pencil stroke with, newest first. Tap one to draw with it again. See recent colours.

Outline · FilledPick one: How Rectangle and Circle are drawn. Line is always one square wide. See outline and filled.

Outline: Just the edge. The page opens with this.

Filled: Solid, edge and inside.

Custom · NES · Game Boy · C64 · PICO-8 · GrayscalePick one: Which list of colours shows below. It changes only the swatches; squares already drawn keep their colours. See indexed colour.

Custom: No swatches. Use the colour box under Color.

NES: 53 colours of the Nintendo Entertainment System. The page opens with this. See NES palette.

Game Boy: Four shades of green, from the original Game Boy screen. See Game Boy palette.

C64: The 16 colours of the Commodore 64. See C64 palette.

PICO-8: The 16 colours of the PICO-8 fantasy console. See PICO-8 palette.

Grayscale: Eight steps from black to white. See grayscale.
SwatchesFilled in by the tool: The colours of the palette you picked. Tap one to draw with it; the colour you draw with is outlined.

Under the buttons, a line shows the grid size and how many different colours the drawing uses.

Grid sizePick one · 8 · 16 · 32 · 64: How many squares across and down. Picking a size, even the one you have, starts an empty grid: the drawing, the undo steps, the zoom and the view are cleared. See canvas size.

8: 8 × 8 squares.

16: 16 × 16 squares. The size the page opens with.

32: 32 × 32 squares.

64: 64 × 64 squares, the largest.
Show gridOn or off · starts on: Draws faint lines between the squares. They show only when a square is at least 4 pixels on screen, and never in the PNG or the copy. See pixel grid.
BackgroundPick one · Transparent · White · Black: What empty squares show, and what the PNG and the copy hold there.

Transparent: A dark checkerboard on screen; see-through in the PNG. See transparent background and alpha.

White: White on screen and in the PNG.

Black: Black on screen and in the PNG.
Reset canvasButton: Empties the grid and puts the zoom and view back. The grid size stays. The undo steps are cleared, so Undo cannot bring the drawing back.

UndoButton: Steps back one change: a Pencil or Eraser stroke, a fill or a shape. Up to 50 are kept. See undo.
RedoButton: Steps forward again after Undo. A new change clears what Redo could bring back. See redo.

It puts the tree back too.

ResetButton: Puts every setting back to how the page opened: the tree on a 16 × 16 grid, Pencil, white, NES, Outline, brush 1, grid on and a see-through background. Recent colours and undo steps are cleared.