Scrapeless Wiki

What Is Canvas Fingerprinting? – Definition and How It Works

Informational P2 what is canvas fingerprinting
Overlaps a live page. A published page already targets this keyword: https://www.scrapeless.com/en/blog/canvas-fingerprinting. Publishing both risks cannibalisation — decide before this goes live.

Learn how canvas fingerprinting extracts a device identifier from rendered pixels, why the output varies by hardware, and why blocking it is itself a signal.

Canvas fingerprinting asks the browser to draw something invisible, reads back the pixels, and hashes them. The same drawing instructions produce subtly different pixels on different machines — and that difference is the identifier.

1. The Mechanism

const ctx = document.createElement('canvas').getContext('2d');
ctx.textBaseline = 'top';
ctx.font = '14px Arial';
ctx.fillStyle = '#f60';
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = '#069';
ctx.fillText('Cwm fjordbank glyphs vext quiz 😃', 2, 15);
const fingerprint = hash(ctx.canvas.toDataURL());

Nothing is displayed. The canvas is never added to the page. The script draws, exports the bitmap, and hashes it.

Every visitor runs identical instructions. The resulting pixels differ.

2. Why the Output Varies

Rendering text and shapes is not deterministic across systems:

  • Font rasterisation. Windows, macOS and Linux hint and anti-alias glyphs differently.
  • Available fonts. A font that is not installed falls back to something else, changing the shape entirely.
  • GPU and driver. Hardware acceleration produces slightly different results across vendors and driver versions.
  • Sub-pixel rendering. Anti-aliasing decisions differ at the level of individual pixel values.
  • Emoji. Each platform ships its own emoji set — the same code point draws a visibly different image, which is why fingerprinting scripts include one.

The differences are invisible to the eye and unmistakable to a hash.

3. Why It Is Effective

  • High entropy. It splits the population much more finely than screen size or timezone.
  • Stable. The same machine reproduces the same value across sessions, browsers restarts, and cleared storage.
  • Stateless. Nothing is stored on the device, so nothing can be deleted.
  • Silent. No permission prompt, no visible artefact, no indication it happened.
  • Fast. A few milliseconds.

Combined with WebGL, audio and font enumeration, canvas is typically the largest single contributor to a browser fingerprint.

4. WebGL Canvas

The 3D variant renders a scene through WebGL and hashes the result, which brings in shader compilation and GPU pipeline behaviour.

It also exposes two strings directly:

gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);    // "Google Inc. (NVIDIA)"
gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);  // "ANGLE (NVIDIA GeForce RTX 3060 ...)"

These name the actual graphics hardware. For automation this is often the giveaway: containers without a GPU report SwiftShader or llvmpipe — software renderers that no consumer machine uses, and that appear in essentially no genuine visitor population.

5. Countermeasures and Their Cost

Blocking. Return a blank canvas or refuse the call. Effective at preventing the read — and highly visible, because a browser that cannot produce canvas output is rare.

Noise injection. Add imperceptible per-session randomness so the hash differs every time. Brave and several privacy tools do this. It defeats linking across sessions, at the cost of a fingerprint that changes on every page load — itself an anomaly.

Uniformity. Tor's approach: make every user render identically. Effective because it produces a large indistinguishable population rather than a unique or a random one.

The pattern generalises. Being unique is bad for privacy; being impossible is bad for detection. A blocked or randomised canvas removes uniqueness and adds strangeness, which helps against trackers and hurts against bot detection. There is no setting that is optimal for both.

6. In Automation

For anyone running headless browsers, the practical points:

  • Software rendering is the tell. A SwiftShader renderer string is a stronger signal than any canvas hash.
  • Spoofing inconsistently is worse than not spoofing. A patched canvas paired with an unpatched WebGL vendor creates a contradiction that a clean environment never produces.
  • A GPU-backed environment produces genuine values without any patching.
  • Consistency across the whole surface matters more than any single value.

7. Real-World Examples

  • A tracker recognising a returning visitor after every cookie and storage item was cleared.
  • A headless browser flagged on WebGL alone, before the canvas hash was even evaluated.
  • A privacy browser with per-session noise treated as suspicious by a fraud system for changing identity every load.
  • A fraud ring linked by identical canvas hashes across dozens of unrelated accounts.
  • A stable automation setup breaking after a driver update, when the rendered output shifted and the device read as new.

8. Summary

Canvas fingerprinting draws to an off-screen canvas, reads back the pixels, and hashes them. Font rasterisation, installed fonts, GPU, driver and emoji sets all perturb the output, producing a high-entropy identifier that is stable per machine and requires no stored state.

WebGL extends it and additionally exposes the graphics hardware by name, which is usually what exposes headless and containerised environments — software renderers appear in no real visitor population.

Countermeasures trade one problem for another: blocking and randomisation defeat tracking while creating anomalies that bot detection reads clearly. Uniformity is the only approach that hides you in a crowd rather than making you conspicuous.