Skip to main content
← Back to Blog
Technical Deep Dive·9 min read·

How Canvas Fingerprinting Works (Technical Deep-Dive)

A ground-up explanation of HTML5 Canvas fingerprinting — why your GPU renders slightly differently from everyone else's, how trackers use it, and how to disrupt it.

#canvas fingerprinting#fingerprinting#technical#GPU

Quick answer

Canvas fingerprinting exploits the fact that the same Canvas 2D drawing operation renders slightly different pixel data on each device, because the result depends on GPU, driver, OS font anti-aliasing, and installed fonts. A tracker draws a hidden canvas, hashes the pixel output, and gets a ~20-bit identifier that persists across cookie deletion, incognito mode, and VPN. Canvas fingerprinting has been in the wild since 2012 and is still one of the most effective fingerprinting techniques in 2026.

The technique in 20 lines of code

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.font = "14px 'Arial'";
ctx.fillStyle = '#f60';
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = '#069';
ctx.fillText('Hello, world! 😀', 2, 15);
ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
ctx.fillText('Hello, world! 😀', 4, 17);
const fingerprint = await sha256(canvas.toDataURL());

Same code on different devices produces different pixel data because:

  • GPU rasterises differently.
  • Font hinting and anti-aliasing differ per OS.
  • Installed fonts affect fallback.
  • Emoji rendering differs across OS versions.
  • Sub-pixel positioning differs.

The resulting hash is typically consistent per device across sessions and unique across ~65% of devices — enough for cross-site tracking when combined with other fingerprinting signals.

WebGL fingerprinting

Similar technique with the WebGL API. Drawing a 3D scene and reading pixel output produces GPU-specific patterns. Often combined with Canvas for higher entropy.

Why it survives normal privacy measures

  • Not a cookie — no cookie-clearing defeats it.
  • Not affected by incognito mode.
  • Not affected by VPN (fingerprint is device-level, not network-level).
  • Works even if you have JavaScript blocking disabled — the code is plain JS, no special permissions needed.

Defences and their trade-offs

Noise injection (PrivacyGuard approach)

Hook the Canvas.toDataURL (and WebGL readPixels) APIs. Perturb the output with per-session random noise. The tracker gets a different fingerprint every session. Cost: some legitimate canvas uses (captchas, games) may break — handled via per-site allow list.

Per-site canvas blocking (Brave approach)

Brave's fingerprinting protection randomises canvas output by default on most sites, with opt-in allow list for sites that need functional canvas.

Tor Browser uniformisation

Tor Browser makes all users look identical — same fonts, same screen size, same GPU stub. Canvas fingerprinting produces the same output for every Tor user. Defeats cross-site tracking but hurts browsing experience.

The arms race

Some trackers now detect randomisation by drawing multiple test canvases and checking for consistency. Anti-randomisation is itself fingerprintable. The landscape is a continuous cat-and-mouse; PrivacyGuard updates its noise model based on observed tracker behaviour.

Related reading

Browser fingerprinting overview · Third-party cookies · GeraCompliance — consent rules