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

#javascript #canvas #gamedev #graphics

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.