cgPaint: Classic CG Algorithms, Pixel by Pixel

For my computer graphics mini project I built a paint app where every primitive is implemented from scratch. No ctx.lineTo for lines. No ctx.arc for circles. Just the raw algorithms, plotting one pixel at a time.

The most useful part turned out to be the speed slider: slow an algorithm down to 100ms per step and you can watch Bresenham decide whether to step right or diagonally. That made the theory click in a way lecture notes didn’t.

DDA vs Bresenham: two ways to draw a line

DDA (Digital Differential Analyzer) is the intuitive approach — divide the total change in x and y by the number of steps, then increment:

JS DDA Line — try changing the endpoints

Bresenham eliminates the floating point entirely using an integer error term. At each step, the error tells you whether the next pixel should be directly right or diagonally up-right:

JS Bresenham Line — inspect the error term

Run both on the same line: they produce identical pixels. The difference shows up at scale — Bresenham avoids floating-point rounding that accumulates across millions of lines in a real renderer.

Bresenham’s circle: computing one octant, mirroring eight

A circle has 8-fold symmetry. Bresenham’s algorithm exploits this: compute one octant (45°), then mirror it to all eight positions simultaneously. For a radius of r, you only do ~r iterations to draw the full circle:

JS Bresenham Circle — 8-way symmetry

Scan-line polygon fill

Given an arbitrary polygon, the scan-line algorithm sweeps horizontal lines top to bottom. For each scan line it finds every edge intersection, sorts them, and fills between pairs. The tricky part is the edge table — you only activate edges whose yMin the current scan line has reached:

JS Scan-line fill — watch the sweep

function scanLineFill(polygon) {
  // Build edge table (skip horizontal edges)
  const edges = [];
  const n = polygon.length;
  for (let i = 0; i < n; i++) {
    const p1 = polygon[i], p2 = polygon[(i + 1) % n];
    if (p1.y === p2.y) continue;
    edges.push({
      yMin: Math.min(p1.y, p2.y),
      yMax: Math.max(p1.y, p2.y),
      xAtYMin: p1.y < p2.y ? p1.x : p2.x,
      slopeInv: (p2.x - p1.x) / (p2.y - p1.y),
    });
  }

const yMin = Math.min(...polygon.map(p => p.y));
  const yMax = Math.max(...polygon.map(p => p.y));

console.log("y  | active edges  | fill range");
  console.log("---|---------------|------------");

for (let y = yMin; y <= yMax; y++) {
    const xs = edges
      .filter(e => y >= e.yMin && y < e.yMax)
      .map(e => Math.round(e.xAtYMin + e.slopeInv * (y - e.yMin)))
      .sort((a, b) => a - b);

for (let i = 0; i < xs.length; i += 2) {
      const row = `y=${y}`.padEnd(3);
      const xPairs = `x=${xs[i]}..${xs[i+1]}`;
      const bar = "█".repeat(xs[i + 1] - xs[i] + 1);
      console.log(`${row}| ${xs.length} intersections | ${xPairs}  ${bar}`);
    }
  }
}

// A simple triangle
const triangle = [
  { x: 5, y: 0 },
  { x: 0, y: 8 },
  { x: 10, y: 8 },
];
scanLineFill(triangle);

The █ blocks in the output show the actual fill span per scan line. You can see the triangle widen as y increases.

2D transformations and why order matters

Translate, rotate, and scale are applied via the canvas transform stack. The important thing: the order you apply them changes the result. Rotate-then-translate is not the same as translate-then-rotate:

JS Transform order — rotate vs translate first

function applyTransform(point, ops) {
  let {x, y} = point;
  const log = [`start: (${x}, ${y})`];

for (const op of ops) {
    if (op.type === 'translate') {
      x += op.x; y += op.y;
      log.push(`translate(${op.x}, ${op.y}) → (${x.toFixed(1)}, ${y.toFixed(1)})`);
    } else if (op.type === 'rotate') {
      const cos = Math.cos(op.angle), sin = Math.sin(op.angle);
      [x, y] = [x*cos - y*sin, x*sin + y*cos];
      log.push(`rotate(${(op.angle * 180/Math.PI).toFixed(0)}°) → (${x.toFixed(1)}, ${y.toFixed(1)})`);
    } else if (op.type === 'scale') {
      x *= op.factor; y *= op.factor;
      log.push(`scale(${op.factor}) → (${x.toFixed(1)}, ${y.toFixed(1)})`);
    }
  }
  return log;
}

const point = { x: 10, y: 0 };
const angle = Math.PI / 2; // 90°

console.log("=== Rotate THEN Translate ===");
applyTransform(point, [
  { type: 'rotate', angle },
  { type: 'translate', x: 5, y: 0 },
]).forEach(l => console.log(l));

console.log("\n=== Translate THEN Rotate ===");
applyTransform(point, [
  { type: 'translate', x: 5, y: 0 },
  { type: 'rotate', angle },
]).forEach(l => console.log(l));

console.log("\nDifferent end points — order matters.");

In the actual app, each shape stores its own transform state and ctx.save()/ctx.restore() isolates it so one object’s rotation doesn’t bleed into the next.

👉 github.com/prathameshrp