Anti-Aliasing

Introduction

Every image on your screen is a rectangular grid of pixels — tiny, square, uncompromising. A horizontal or vertical line maps perfectly onto that grid. A diagonal line does not.

When the renderer decides which pixels to light up for a 45-degree edge, it must round each intersection to the nearest whole pixel. The result is a staircase — the jagged zigzag pattern known as aliasing. You see it on game fonts, UI borders, 3D geometry, even SVG icons rendered at small sizes.

Anti-aliasing is any technique that softens that staircase by making boundary pixels partially transparent or blended. The core idea is simple: instead of asking "is this pixel inside or outside the edge?", ask "what fraction of this pixel does the edge cover?" — and color it proportionally.

The word comes from signal processing. A pixel grid is a sampler, and a diagonal edge is a high-frequency signal. Without enough sample points the grid aliases — it misrepresents the signal as a coarser, lower-frequency staircase. Anti-aliasing is the act of increasing or simulating higher sampling density before that misrepresentation happens.

Try It

The canvas below renders a white diagonal edge on a dark background. Switch between None, MSAA and FXAA to see what each technique does to the boundary pixels.

<!-- Layout: mode buttons + two canvases (zoomed pixel view + full diagonal) -->
<div class="controls">
  <span class="label">Mode:</span>
  <button id="btn-none" class="mode-btn active" data-mode="none">None</button>
  <button id="btn-msaa" class="mode-btn" data-mode="msaa">MSAA 4×</button>
  <button id="btn-fxaa" class="mode-btn" data-mode="fxaa">FXAA</button>
</div>
<div class="canvases">
  <div class="panel">
    <div class="panel-label">Zoomed (10×)</div>
    <canvas id="zoom" width="200" height="200"></canvas>
  </div>
  <div class="panel">
    <div class="panel-label">Full view</div>
    <canvas id="full" width="320" height="200"></canvas>
  </div>
</div>
<div id="info" class="info">None — each pixel is binary: fully lit or fully dark. The staircase is sharp.</div>

/* Styles for controls, canvas panels, and info bar */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
.controls { display: flex; align-items: center; gap: .5rem; padding: .6rem 0 .8rem; flex-wrap: wrap; }
.label { font-size: .85rem; font-weight: 600; color: #555; }
.mode-btn { font: 600 13px system-ui; padding: .35rem .8rem; border: 1.5px solid #1d3557;
            background: #fff; color: #1d3557; border-radius: 6px; cursor: pointer; transition: all .15s; }
.mode-btn.active { background: #1d3557; color: #fff; }
.canvases { display: flex; gap: 1rem; flex-wrap: wrap; }
.panel { display: flex; flex-direction: column; gap: .3rem; }
.panel-label { font-size: .78rem; font-weight: 600; color: #666; text-align: center; }
canvas { display: block; border: 1px solid #cdd5dd; border-radius: 6px; background: #111;
         image-rendering: pixelated; }
#zoom { width: 200px; height: 200px; }
#full { width: 320px; height: 200px; }
.info { margin-top: .7rem; font-size: .85rem; color: #444; line-height: 1.5; min-height: 2.5em; }

const i18nFmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// Grab canvas elements and their 2D contexts
const zoomCanvas = document.getElementById('zoom');
const fullCanvas = document.getElementById('full');
const zCtx = zoomCanvas.getContext('2d');
const fCtx = fullCanvas.getContext('2d');
const infoEl = document.getElementById('info');

// Scene parameters
// Diagonal edge defined by y = EDGE_SLOPE * x - EDGE_OFFSET (pixels below the line are bright)
const EDGE_SLOPE = 1.4;
const EDGE_OFFSET = 30;

// Coverage sampling helper
// Returns fraction [0,1] of sub-pixel samples inside the bright half of the scene
function coverageAt(px, py, subSamples) {
  let inside = 0;
  const step = 1 / subSamples;
  const half = step / 2;
  for (let sy = 0; sy < subSamples; sy++) {
    for (let sx = 0; sx < subSamples; sx++) {
      const x = px + half + sx * step;
      const y = py + half + sy * step;
      // Point is inside (bright) if below the diagonal line
      if (y > EDGE_SLOPE * x - EDGE_OFFSET) inside++;
    }
  }
  return inside / (subSamples * subSamples);
}

// Render without anti-aliasing (binary coverage)
function renderNone(ctx, w, h) {
  const img = ctx.createImageData(w, h);
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      // Binary inside/outside test for each pixel center
      const inside = (py > EDGE_SLOPE * px - EDGE_OFFSET) ? 1 : 0;
      const bright = inside * 255;
      const i = (py * w + px) * 4;
      img.data[i] = bright; img.data[i+1] = bright; img.data[i+2] = bright; img.data[i+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

// Render with MSAA using NxN sub-pixel grid per pixel
function renderMSAA(ctx, w, h, samples) {
  const img = ctx.createImageData(w, h);
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const cov = coverageAt(px, py, samples);
      const bright = Math.round(cov * 255);
      const i = (py * w + px) * 4;
      img.data[i] = bright; img.data[i+1] = bright; img.data[i+2] = bright; img.data[i+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

// Render with FXAA (post-process luminance edge detection + blend)
function renderFXAA(ctx, w, h) {
  // Step 1 - render the aliased base image
  renderNone(ctx, w, h);
  const src = ctx.getImageData(0, 0, w, h);
  const dst = ctx.createImageData(w, h);
  const lum = (r, g, b) => 0.299 * r + 0.587 * g + 0.114 * b;
  // Step 2 - detect edges by local luminance contrast and blur along them
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const idx = (py * w + px) * 4;
      const lC = lum(src.data[idx], src.data[idx+1], src.data[idx+2]);
      // Sample luminance of the 4 cardinal neighbors
      const getL = (x, y) => {
        if (x < 0 || x >= w || y < 0 || y >= h) return lC;
        const ii = (y * w + x) * 4;
        return lum(src.data[ii], src.data[ii+1], src.data[ii+2]);
      };
      const lN = getL(px, py-1), lS = getL(px, py+1);
      const lE = getL(px+1, py), lW = getL(px-1, py);
      const maxL = Math.max(lC, lN, lS, lE, lW);
      const minL = Math.min(lC, lN, lS, lE, lW);
      const contrast = maxL - minL;
      // Only blur pixels with contrast above this threshold (0-255 scale)
      const THRESHOLD = 40;
      let blended;
      if (contrast < THRESHOLD) {
        blended = src.data[idx];
      } else {
        // Blur along the dominant edge axis (horizontal or vertical)
        const isHoriz = Math.abs(lN + lS - 2 * lC) >= Math.abs(lE + lW - 2 * lC);
        const blend = isHoriz
          ? (src.data[((Math.max(py-1,0)) * w + px) * 4] + src.data[((Math.min(py+1,h-1)) * w + px) * 4]) / 2
          : (src.data[(py * w + Math.max(px-1,0)) * 4] + src.data[(py * w + Math.min(px+1,w-1)) * 4]) / 2;
        blended = (src.data[idx] + blend) / 2;
      }
      const out = Math.round(blended);
      dst.data[idx] = out; dst.data[idx+1] = out; dst.data[idx+2] = out; dst.data[idx+3] = 255;
    }
  }
  ctx.putImageData(dst, 0, 0);
}

// Zoom renderer
// Magnifies a 20x20 tile from the full render at 10x scale to show pixel structure
const ZOOM_W = 20, ZOOM_H = 20, ZOOM_SCALE = 10;
const ZOOM_X = 18;
function renderZoom(srcCtx, srcW) {
  const src = srcCtx.getImageData(ZOOM_X, 0, ZOOM_W, ZOOM_H);
  zCtx.clearRect(0, 0, 200, 200);
  for (let py = 0; py < ZOOM_H; py++) {
    for (let px = 0; px < ZOOM_W; px++) {
      const i = (py * ZOOM_W + px) * 4;
      const r = src.data[i], g = src.data[i+1], b = src.data[i+2];
      zCtx.fillStyle = `rgb(${r},${g},${b})`;
      zCtx.fillRect(px * ZOOM_SCALE, py * ZOOM_SCALE, ZOOM_SCALE, ZOOM_SCALE);
    }
  }
  // Draw pixel grid overlay on the zoom view
  zCtx.strokeStyle = 'rgba(100,150,200,0.25)';
  zCtx.lineWidth = 0.5;
  for (let i = 0; i <= ZOOM_W; i++) { zCtx.beginPath(); zCtx.moveTo(i*ZOOM_SCALE,0); zCtx.lineTo(i*ZOOM_SCALE,200); zCtx.stroke(); }
  for (let i = 0; i <= ZOOM_H; i++) { zCtx.beginPath(); zCtx.moveTo(0,i*ZOOM_SCALE); zCtx.lineTo(200,i*ZOOM_SCALE); zCtx.stroke(); }
}

const INFO = {
  none: 'None — each pixel is binary: fully lit or fully dark. The staircase is sharp.',
  msaa: 'MSAA 4× — 16 sub-pixel samples per pixel. Boundary pixels blend proportionally to edge coverage.',
  fxaa: 'FXAA — post-process luminance edge detection + directional blur. Fast, but may soften fine detail.'
};

let currentMode = 'none';
function draw(mode) {
  currentMode = mode;
  const W = fullCanvas.width, H = fullCanvas.height;
  if (mode === 'none') {
    renderNone(fCtx, W, H);
  } else if (mode === 'msaa') {
    renderMSAA(fCtx, W, H, 4);
  } else {
    renderFXAA(fCtx, W, H);
  }
  renderZoom(fCtx, W);
  infoEl.textContent = INFO[mode];
}

// Wire up mode toggle buttons
document.querySelectorAll('.mode-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    draw(btn.dataset.mode);
  });
});

draw('none');

<!-- Layout: mode buttons + two canvases (zoomed pixel view + full diagonal) -->
<div class="controls">
  <span class="label">Mode:</span>
  <button id="btn-none" class="mode-btn active" data-mode="none">None</button>
  <button id="btn-msaa" class="mode-btn" data-mode="msaa">MSAA 4×</button>
  <button id="btn-fxaa" class="mode-btn" data-mode="fxaa">FXAA</button>
</div>
<div class="canvases">
  <div class="panel">
    <div class="panel-label">Zoomed (10×)</div>
    <canvas id="zoom" width="200" height="200"></canvas>
  </div>
  <div class="panel">
    <div class="panel-label">Full view</div>
    <canvas id="full" width="320" height="200"></canvas>
  </div>
</div>
<div id="info" class="info">None — each pixel is binary: fully lit or fully dark. The staircase is sharp.</div>

/* Styles for controls, canvas panels, and info bar */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
.controls { display: flex; align-items: center; gap: .5rem; padding: .6rem 0 .8rem; flex-wrap: wrap; }
.label { font-size: .85rem; font-weight: 600; color: #555; }
.mode-btn { font: 600 13px system-ui; padding: .35rem .8rem; border: 1.5px solid #1d3557;
            background: #fff; color: #1d3557; border-radius: 6px; cursor: pointer; transition: all .15s; }
.mode-btn.active { background: #1d3557; color: #fff; }
.canvases { display: flex; gap: 1rem; flex-wrap: wrap; }
.panel { display: flex; flex-direction: column; gap: .3rem; }
.panel-label { font-size: .78rem; font-weight: 600; color: #666; text-align: center; }
canvas { display: block; border: 1px solid #cdd5dd; border-radius: 6px; background: #111;
         image-rendering: pixelated; }
#zoom { width: 200px; height: 200px; }
#full { width: 320px; height: 200px; }
.info { margin-top: .7rem; font-size: .85rem; color: #444; line-height: 1.5; min-height: 2.5em; }

const i18nFmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// Grab canvas elements and their 2D contexts
const zoomCanvas = document.getElementById('zoom');
const fullCanvas = document.getElementById('full');
const zCtx = zoomCanvas.getContext('2d');
const fCtx = fullCanvas.getContext('2d');
const infoEl = document.getElementById('info');

// Scene parameters
// Diagonal edge defined by y = EDGE_SLOPE * x - EDGE_OFFSET (pixels below the line are bright)
const EDGE_SLOPE = 1.4;
const EDGE_OFFSET = 30;

// Coverage sampling helper
// Returns fraction [0,1] of sub-pixel samples inside the bright half of the scene
function coverageAt(px, py, subSamples) {
  let inside = 0;
  const step = 1 / subSamples;
  const half = step / 2;
  for (let sy = 0; sy < subSamples; sy++) {
    for (let sx = 0; sx < subSamples; sx++) {
      const x = px + half + sx * step;
      const y = py + half + sy * step;
      // Point is inside (bright) if below the diagonal line
      if (y > EDGE_SLOPE * x - EDGE_OFFSET) inside++;
    }
  }
  return inside / (subSamples * subSamples);
}

// Render without anti-aliasing (binary coverage)
function renderNone(ctx, w, h) {
  const img = ctx.createImageData(w, h);
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      // Binary inside/outside test for each pixel center
      const inside = (py > EDGE_SLOPE * px - EDGE_OFFSET) ? 1 : 0;
      const bright = inside * 255;
      const i = (py * w + px) * 4;
      img.data[i] = bright; img.data[i+1] = bright; img.data[i+2] = bright; img.data[i+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

// Render with MSAA using NxN sub-pixel grid per pixel
function renderMSAA(ctx, w, h, samples) {
  const img = ctx.createImageData(w, h);
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const cov = coverageAt(px, py, samples);
      const bright = Math.round(cov * 255);
      const i = (py * w + px) * 4;
      img.data[i] = bright; img.data[i+1] = bright; img.data[i+2] = bright; img.data[i+3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

// Render with FXAA (post-process luminance edge detection + blend)
function renderFXAA(ctx, w, h) {
  // Step 1 - render the aliased base image
  renderNone(ctx, w, h);
  const src = ctx.getImageData(0, 0, w, h);
  const dst = ctx.createImageData(w, h);
  const lum = (r, g, b) => 0.299 * r + 0.587 * g + 0.114 * b;
  // Step 2 - detect edges by local luminance contrast and blur along them
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const idx = (py * w + px) * 4;
      const lC = lum(src.data[idx], src.data[idx+1], src.data[idx+2]);
      // Sample luminance of the 4 cardinal neighbors
      const getL = (x, y) => {
        if (x < 0 || x >= w || y < 0 || y >= h) return lC;
        const ii = (y * w + x) * 4;
        return lum(src.data[ii], src.data[ii+1], src.data[ii+2]);
      };
      const lN = getL(px, py-1), lS = getL(px, py+1);
      const lE = getL(px+1, py), lW = getL(px-1, py);
      const maxL = Math.max(lC, lN, lS, lE, lW);
      const minL = Math.min(lC, lN, lS, lE, lW);
      const contrast = maxL - minL;
      // Only blur pixels with contrast above this threshold (0-255 scale)
      const THRESHOLD = 40;
      let blended;
      if (contrast < THRESHOLD) {
        blended = src.data[idx];
      } else {
        // Blur along the dominant edge axis (horizontal or vertical)
        const isHoriz = Math.abs(lN + lS - 2 * lC) >= Math.abs(lE + lW - 2 * lC);
        const blend = isHoriz
          ? (src.data[((Math.max(py-1,0)) * w + px) * 4] + src.data[((Math.min(py+1,h-1)) * w + px) * 4]) / 2
          : (src.data[(py * w + Math.max(px-1,0)) * 4] + src.data[(py * w + Math.min(px+1,w-1)) * 4]) / 2;
        blended = (src.data[idx] + blend) / 2;
      }
      const out = Math.round(blended);
      dst.data[idx] = out; dst.data[idx+1] = out; dst.data[idx+2] = out; dst.data[idx+3] = 255;
    }
  }
  ctx.putImageData(dst, 0, 0);
}

// Zoom renderer
// Magnifies a 20x20 tile from the full render at 10x scale to show pixel structure
const ZOOM_W = 20, ZOOM_H = 20, ZOOM_SCALE = 10;
const ZOOM_X = 18;
function renderZoom(srcCtx, srcW) {
  const src = srcCtx.getImageData(ZOOM_X, 0, ZOOM_W, ZOOM_H);
  zCtx.clearRect(0, 0, 200, 200);
  for (let py = 0; py < ZOOM_H; py++) {
    for (let px = 0; px < ZOOM_W; px++) {
      const i = (py * ZOOM_W + px) * 4;
      const r = src.data[i], g = src.data[i+1], b = src.data[i+2];
      zCtx.fillStyle = `rgb(${r},${g},${b})`;
      zCtx.fillRect(px * ZOOM_SCALE, py * ZOOM_SCALE, ZOOM_SCALE, ZOOM_SCALE);
    }
  }
  // Draw pixel grid overlay on the zoom view
  zCtx.strokeStyle = 'rgba(100,150,200,0.25)';
  zCtx.lineWidth = 0.5;
  for (let i = 0; i <= ZOOM_W; i++) { zCtx.beginPath(); zCtx.moveTo(i*ZOOM_SCALE,0); zCtx.lineTo(i*ZOOM_SCALE,200); zCtx.stroke(); }
  for (let i = 0; i <= ZOOM_H; i++) { zCtx.beginPath(); zCtx.moveTo(0,i*ZOOM_SCALE); zCtx.lineTo(200,i*ZOOM_SCALE); zCtx.stroke(); }
}

const INFO = {
  none: 'None — each pixel is binary: fully lit or fully dark. The staircase is sharp.',
  msaa: 'MSAA 4× — 16 sub-pixel samples per pixel. Boundary pixels blend proportionally to edge coverage.',
  fxaa: 'FXAA — post-process luminance edge detection + directional blur. Fast, but may soften fine detail.'
};

let currentMode = 'none';
function draw(mode) {
  currentMode = mode;
  const W = fullCanvas.width, H = fullCanvas.height;
  if (mode === 'none') {
    renderNone(fCtx, W, H);
  } else if (mode === 'msaa') {
    renderMSAA(fCtx, W, H, 4);
  } else {
    renderFXAA(fCtx, W, H);
  }
  renderZoom(fCtx, W);
  infoEl.textContent = INFO[mode];
}

// Wire up mode toggle buttons
document.querySelectorAll('.mode-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    draw(btn.dataset.mode);
  });
});

draw('none');

Result

Console

None — each pixel is simply on or off; the staircase is sharp and obvious. MSAA (Multisample Anti-Aliasing) shoots multiple sub-pixel samples per pixel and averages the coverage — boundary pixels get a gray blend proportional to how much of the pixel area the edge covers. FXAA (Fast Approximate Anti-Aliasing) is a post-process filter: it reads the finished image, detects high-contrast edges by comparing luminance, then blurs along them. It costs far less than MSAA but can soften detail that isn't actually an edge.

The Real Complexity

Why does the staircase appear, and how much work does it take to remove it?

The aliasing root cause. A pixel covers a square area of the scene. If the edge crosses that square, the renderer must make a binary decision: lit or dark. That binary choice is the alias. Mathematically, the pixel grid has a Nyquist frequency of $\frac{1}{2}$ cycle per pixel; a diagonal edge changes faster than that, so it aliases.

Supersampling (SSAA). The brute-force fix: render the scene at $k \times k$ the final resolution, then box-filter (average) down. A $4 \times$ supersample takes 16 shading samples per output pixel. Cost: $O(k^2)$ shading work. Quality: near-perfect. Rarely used at full strength because shading is expensive.

MSAA. Multisample Anti-Aliasing separates geometry coverage from shading. For each pixel, $n$ sub-pixel positions are tested against triangle edges — only coverage is evaluated $n$ times, but shading runs once per visible triangle per pixel. A 4× MSAA pixel has 4 sample points; the final color is the edge's color multiplied by the fraction of samples inside the triangle. Cost scales with $n$ coverage tests, not $n$ full shader runs.

FXAA. A single-pass screen-space filter. It computes the luminance $L$ at each pixel and its four neighbors. High local contrast ( $\max(L) - \min(L) > \text{threshold}$ ) signals an edge. The filter then blends the pixel along the detected edge direction. No geometry information is used; it works entirely on the final image. It runs in $O(1)$ per pixel but can blur fine detail.

TAA. Temporal Anti-Aliasing reuses samples from previous frames, accumulating a moving average over time. It achieves quality close to 8× MSAA at near-FXAA cost, but introduces ghosting when objects move fast. Modern engines (Unreal, Unity) default to TAA or its variants (DLSS, FSR) for this reason.

The common thread: trading shading cost for coverage information. The more sub-pixel information you gather — spatially or temporally — the smoother the edge, at a proportional computational price.

Where It Matters

The staircase problem appears wherever continuous geometry meets a discrete grid:

3D games and film CGI. Triangle edges, shadow boundaries and specular highlights all alias violently at typical resolutions. MSAA, TAA and vendor-specific super-resolution (NVIDIA DLSS, AMD FSR) are the front line of modern rendering pipelines.
Font rendering. Sub-pixel anti-aliasing (ClearType, FreeType hinting) exploits the RGB stripe layout of LCD panels to triple the effective horizontal resolution, making text at 12 px look sharp. Without it, small glyphs would be unreadable staircases.
Vector-to-raster export. When a browser renders SVG or a design tool exports a PNG, it must decide how much of each pixel a Bézier curve covers. High-quality rasterizers use analytic coverage — integrating the exact area of the curve inside each pixel — rather than sampling.
Medical and satellite imaging. Resampling a CT scan or resizing a satellite tile introduces aliasing in structures smaller than a pixel. Lanczos and sinc filters are the anti-aliasing equivalents for image resampling.
Signal processing broadly. Anti-aliasing filters on ADC inputs are analog low-pass filters that remove frequencies above the Nyquist limit before the signal is sampled. The concept is the same: prevent high frequencies from folding back into the sampled signal as false low-frequency content.

Understand anti-aliasing and you understand dimensionality reduction and sampling theory — the same trade-off between resolution, cost and perceptual quality runs through all of them.

Conclusion

Every diagonal you see on screen is secretly a staircase — it's just that anti-aliasing blends the boundary pixels so convincingly that your eye fills in the gap. From simple coverage averaging in MSAA to luminance-guided blurring in FXAA to multi-frame accumulation in TAA, every approach answers the same question: how much of this pixel does the edge own?

The deeper lesson is about sampling. A pixel grid is a sampler with a fixed frequency ceiling. Any geometric detail finer than half a pixel spacing cannot be represented faithfully — only approximated. Anti-aliasing is the art of making that approximation perceptually invisible, one boundary blend at a time.

Next time a game menu lets you choose between MSAA, FXAA and TAA, you'll know the trade-off: sharp geometry coverage versus fast post-processing versus temporal quality — and why none of them is free.

Comments

Loading comments...

https://www.kipuhub.com/en/article/anti-aliasing/Content licensed under CC BY-NC 4.0.

Cookies & privacy

How pixels learn to fake a smooth edge