Canvas Fingerprinting – BrowserLeaks

The way an image is rendered on a canvas can vary based on the web browser, operating system, graphics card, and other factors, resulting in a unique image that can be used to create a fingerprint. The way that text is rendered on a canvas can also vary based on the font rendering settings and anti-aliasing algorithms used by different web browsers and operating systems.

This small animated GIF illustrates the variability of canvas images among 35 different users. Although the JavaScript code remains the same, each frame is distinct due to differences in how the images are rendered on different systems:

Here is the JavaScript code that creates our image:

1. // Text with lowercase/uppercase/punctuation symbols
2. var txt = “BrowserLeaks,com 1.0″;
3. ctx.textBaseline = “top”;
4. // The most common type
5. ctx.font = “14px ‘Arial'”;
6. ctx.textBaseline = “alphabetic”;
7. ctx.fillStyle = “#f60”;
8. ctx.fillRect(125,1,62,20);
9. // Some tricks for color mixing to increase the difference in rendering
10. ctx.fillStyle = “#069”;
11. ctx.fillText(txt, 2, 15);
12. ctx.fillStyle = “rgba(102, 204, 0, 0.7)”;
13. ctx.fillText(txt, 4, 17);

To generate a signature from the canvas, we need to extract the pixels from the application’s memory by calling the toDataURL() function. This function returns a base64-encoded string representing the binary image file. We can then compute an MD5 hash of this string to obtain the canvas fingerprint. Alternatively, we could extract the CRC checksum from the IDAT chunk, which is located 16 to 12 bytes from the end of every PNG file, and use it as our canvas fingerprint.