Canvas fingerprinting

How it works

The canvas element lets a page draw with JavaScript. A fingerprinting script creates a canvas the visitor never sees, writes a line of text in a few fonts (often with an emoji), adds shapes and a gradient, then reads the result back with toDataURL() or getImageData() and turns it into a short hash.

The same instructions don’t produce identical pixels everywhere. Anti-aliasing, font rendering, the graphics driver and the operating system all leave small differences. Keaton Mowery and Hovav Shacham described the method in 2012. On one computer, with one browser build, the hash is the same in every tab and every profile, which is what makes it useful for recognising a device.

Why it matters when you run several accounts

Several profiles on one computer return the same canvas hash unless something changes it. Changing it from a script inside the page is risky, though. Test pages draw images whose correct output is known, check whether the drawing functions have been replaced, and read the canvas twice to see whether the answer moves. Noise that is detected, or that changes between reads, can single a profile out more than the honest result would.

How SoftGlaze Browser handles it

On the standard engine, SoftGlaze Browser does not change a 2D canvas drawing. A profile returns your computer’s real canvas result there, because changing it from a script is easy for sites to spot. The optional fingerprint-chromium engine, off by default, changes canvas output inside the browser itself from a per-profile seed. On the standard engine the other drawing tests (WebGL image, AudioContext and ClientRects) do differ per profile, with their noise switches on, which is the default. If a profile claims a different operating system from the computer’s, the editor warns that the canvas raster still comes from the real machine.