A Pixel Art Editor With Bresenham Lines, Flood Fill, and Immutable Grid State

The editor has six tools: pencil, eraser, flood fill, line, rectangle, and eyedropper. Each tool operates on an immutable grid — every edit returns a new 2D array. That makes undo/redo just a history stack of snapshots with no deep-copy bookkeeping per action.

Pixel art editors look simple but surface a few interesting algorithm choices. Flood fill needs a BFS/DFS. Line drawing needs Bresenham (or similar). Rectangle drawing is just two lines (unfilled) or N rows (filled). Undo/redo is trivial if your state is immutable and expensive if it's not.

🔗 Live demo: https://sen.ltd/portfolio/pixel-art-editor/
📦 GitHub: https://github.com/sen-ltd/pixel-art-editor

Features:

• 6 tools: pencil, eraser, flood fill, line, rectangle, eyedropper
• 16 preset colors + custom color picker
• Undo / redo (history stack)
• Zoom (1x - 16x)
• Grid lines toggle
• Import image (sample to grid)
• Export as PNG (16x upscale)
• Keyboard shortcuts (P/E/F/L/R/I, Z, Shift+Z, +/-)
• Japanese / English UI
• Zero dependencies, 39 tests

Immutable grid state

Each grid is a 2D array of color strings. Every operation returns a new array:

export function setPixel(grid, x, y, color) {
  if (x < 0 || y < 0 || y >= grid.length || x >= grid[0].length) return grid;
  const newGrid = grid.map(row => row.slice());
  newGrid[y][x] = color;
  return newGrid;
}

row.slice() gives each row a new reference, so subsequent edits never mutate the old grid. Undo/redo is then just history.push(grid) on each edit and grid = history[--index] on undo.

Flood fill with BFS

The classic "paint bucket" algorithm:

export function floodFill(grid, x, y, newColor) {
  const target = getPixel(grid, x, y);
  if (target === newColor) return grid;
  const result = cloneGrid(grid);
  const queue = [[x, y]];
  while (queue.length > 0) {
    const [cx, cy] = queue.shift();
    if (getPixel(result, cx, cy) !== target) continue;
    result[cy][cx] = newColor;
    queue.push([cx+1, cy], [cx-1, cy], [cx, cy+1], [cx, cy-1]);
  }
  return result;
}

Early return on "target === newColor" prevents infinite loops when clicking a cell that already has the target color.

Bresenham's line algorithm

Line drawing can't just be for t in 0..1 { plot(lerp(a, b, t)) } — that produces gaps or double-draws depending on slope. Bresenham's algorithm uses integer-only arithmetic to decide which pixel to step to next:

export function drawLine(grid, x0, y0, x1, y1, color) {
  const result = cloneGrid(grid);
  const dx = Math.abs(x1 - x0);
  const dy = -Math.abs(y1 - y0);
  const sx = x0 < x1 ? 1 : -1;
  const sy = y0 < y1 ? 1 : -1;
  let err = dx + dy;
  let x = x0, y = y0;
  while (true) {
    setPixelInPlace(result, x, y, color);
    if (x === x1 && y === y1) break;
    const e2 = 2 * err;
    if (e2 >= dy) { err += dy; x += sx; }
    if (e2 <= dx) { err += dx; y += sy; }
  }
  return result;
}

The err accumulator tracks the accumulated distance from the ideal line. When it crosses a threshold, we step diagonally; otherwise we step axially. This produces a visually straight line with no gaps, using only integer addition.

Rectangle as two lines

Unfilled rectangle = top edge + bottom edge + left edge + right edge. Filled rectangle = loop over all cells in the bounding box. No complex clipping, just a bounded loop:

export function drawRect(grid, x0, y0, x1, y1, color, filled) {
  // normalize corners
  const minX = Math.min(x0, x1), maxX = Math.max(x0, x1);
  const minY = Math.min(y0, y1), maxY = Math.max(y0, y1);
  for (let y = minY; y <= maxY; y++) {
    for (let x = minX; x <= maxX; x++) {
      if (filled || x === minX || x === maxX || y === minY || y === maxY) {
        result[y][x] = color;
      }
    }
  }
}

Preview canvas for live drawing

Line and rectangle tools need to show the in-progress stroke as the mouse drags. Drawing to the main canvas would pollute history and make undo weird. Solution: a transparent overlay canvas.

During drag, render preview pixels to the overlay. On mouseup, commit to the main grid and clear the overlay. Clean separation, zero state corruption.

Series

This is entry #51 in my 100+ public portfolio series.

• 📦 Repo: https://github.com/sen-ltd/pixel-art-editor
• 🌐 Live: https://sen.ltd/portfolio/pixel-art-editor/
• 🏢 Company: https://sen.ltd/