Canvas Support Detection
|Canvas 2D API|
|Text API for Canvas|
Image File Details
|Number of Colors|
|It's very likely that your web browser is Web Browser and your operating system is Operating System.|
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.
- // Text with lowercase/uppercase/punctuation symbols
- var txt = "BrowserLeaks,com <canvas> 1.0";
- ctx.textBaseline = "top";
- // The most common type
- ctx.font = "14px 'Arial'";
- ctx.textBaseline = "alphabetic";
- ctx.fillStyle = "#f60";
- // Some tricks for color mixing to increase the difference in rendering
- ctx.fillStyle = "#069";
- ctx.fillText(txt, 2, 15);
- ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
- 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.
The first article about the difference in rendering pixels. Not about fingerprinting, but just after this article it became clear to us that something similar can be done.
- Pixel Perfect: Fingerprinting Canvas in HTML5
A well-known study, after which the topic has become known to the public.
- The Web never forgets: Persistent tracking mechanisms in the wild
And now it is used by thousands of sites...
Firefox add-on that changes the JS-API for modifying <canvas> to prevent Canvas Fingerprinting.
- Canvas Fingerprinting – Wikipedia
- HTML5 Canvas – MDN
- Compatibility tables for support of Canvas & WebGL in desktop and mobile browsers – Can I Use