How does HTML5 Canvas fingerprinting work, and why does identical code produce device-unique results?

A site draws hidden text/graphics on an HTML5 canvas; tiny rendering differences (GPU, drivers, anti-aliasing, font rendering) make the resulting image — and its hash — unique per device.

* The four steps of canvas fingerprinting. *

Why identical JavaScript yields different images: the same draw instructions render slightly differently depending on:

• Graphics card & drivers
• Image-processing engines
• Anti-aliasing
• Font rendering

The four steps:

1. Create an invisible canvas element via JavaScript
2. Draw complex text, shapes, colors, and emojis
3. Extract the image data (toDataURL() / getImageData())
4. Hash the pixel data into a unique fingerprint

Effectiveness: ~15–20 bits of entropy on its own; combined with other fingerprinting techniques, over 99% uniqueness.

Tip: Watch for calls to toDataURL() and getImageData() in DevTools to spot fingerprinting scripts; test yours at BrowserLeaks Canvas Test.

Go deeper:

• Canvas fingerprinting (Wikipedia) — the HTML5-canvas rendering-difference technique as a cookieless tracker.