Canvas Fingerprinting Explained

How the technique works

The HTML5 canvas element lets a page draw graphics with JavaScript: text, shapes, gradients, images. Canvas fingerprinting exploits a side effect. When a page asks for the finished pixels back — via toDataURL() or getImageData() — the exact bytes it receives depend on how your system rendered the drawing. Graphics hardware, driver versions, operating system, installed fonts, anti-aliasing, and sub-pixel smoothing all leave traces in the pixel output. Two computers given identical instructions can return measurably different images.

A fingerprinting script therefore draws a deliberately rendering-sensitive scene — usually text in specific fonts, overlapping shapes with transparency, and a color gradient — reads the pixels, and hashes them into a compact identifier. The drawing is typically done off-screen, so you never see it happen.

Why the output differs between systems

• Text rendering — font rasterization and smoothing differ across operating systems and settings; letter edges land on slightly different pixels.
• GPU and drivers — hardware-accelerated drawing rounds, blends, and anti-aliases in hardware-specific ways.
• Color handling — gradients and alpha compositing can differ at the least-significant-bit level between graphics stacks.
• Installed fonts — if a requested font is missing, a fallback renders instead, changing the image entirely.

None of these differences are visible to the eye. They matter only because the pixel data can be read back exactly.

Why it rates higher distinguishing power

Canvas output blends several independent factors — hardware, drivers, OS, fonts, settings — into one value. Systems must match on all of them to produce the same hash, which makes canvas one of the more distinguishing single tests in this site's analyzer. It is also stable: the hash typically stays constant until a browser, driver, or OS update changes rendering behavior.

What this site's test does

The analyzer draws a fixed scene (text, an overlapping translucent circle, a gradient) on an off-screen canvas, reads the pixel output, and computes a SHA-256 hash of it in your browser. The hash is displayed to you and kept only in page memory for comparison; it is never uploaded or stored.

Defenses that actually help

The effective defenses change or standardize the pixel output:

• Randomization — Firefox's resist-fingerprinting mode, Brave's "farbling," and several extensions add tiny noise to canvas reads, so the hash differs on every session or every site. The image looks identical to humans; the hash does not.
• Standardization — Tor Browser aims to make many users return the same canvas result, hiding individuals in a crowd.
• Read blocking — some tools prompt or refuse when a page reads canvas pixels. Effective, but occasionally breaks legitimate sites that read canvas for real features.

You can verify a defense yourself: run the analyzer, enable the protection, then use Run again and compare. If the canvas hash changes between runs, the randomization is working. The reduction guide covers the broader strategy.