Drawing the Invisible
Canvas fingerprinting is a technique where a script instructs your browser to draw a hidden image or text using the HTML5 <canvas> API. Because different operating systems, graphics cards (GPUs), and graphics drivers render text and anti-aliasing slightly differently, the resulting image is unique at the pixel level.
The Process
- The script creates a hidden canvas element.
- It draws text with specific fonts, sizes, and colors, often overlapping shapes.
- It calls
canvas.toDataURL()to get a Base64 string of the image. - It hashes this string. This hash is your Canvas Fingerprint.
Why is it so effective?
It relies on subtle hardware and software differences. A Mac rendering "Arial" looks different at the pixel level than a Windows machine rendering "Arial" due to differences in sub-pixel rendering (ClearType on Windows vs. macOS anti-aliasing).
Defense
Browsers like Brave and extensions like Canvas Defender spoof this by adding slight, random noise to the canvas output. Every time a script requests the canvas data, it gets a slightly different result, making it impossible to generate a consistent hash.