The Canvas API is designed for rendering graphics within web browsers. It can be utilized for animations, game visuals, data visualization, image editing, and real-time video processing, among other things. It can also be used for online tracking through browser fingerprinting. This technology relies on the variations in how canvas images are displayed across different web browsers and platforms to create a unique digital fingerprint of a user's browser. However, it is possible for it to be duplicated in completely identical device environments.

Canvas Function Detection

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(Commonly used in fingerprint recognition)
• OffscreenCanvas API
• Canvas native

  Canvas fingerprints can also be altered by browser plugins, but they are easily identifiable.

• Stability

  Under the same device and browser environment, canvas exhibits stability.

• Anthropogenic Noise

  Although some fingerprint browsers or plugins can add parameters to canvas noise, they may still be identifiable.

Image Details

The reason for the generation of Canvas fingerprints.

The presentation of Canvas images on the canvas may vary due to web browsers, operating systems, graphics cards, and other factors, thereby generating unique images that can be used to create fingerprints.

1. Anti-aliasing

Anti-aliasing technology, akin to a beautifying filter, is widely employed. Without the font smoothing feature enabled in the operating system, certain fonts may appear dreadful on computer monitors. Typically, Windows OS defaults to smoothing fonts and images. In Mac OS X, anti-aliasing seems to apply only to fonts below a certain size. Not only at the operating system level, some browsers also incorporate their own anti-aliasing technology, such as Safari with its built-in font rendering engine. Most importantly, anti-aliasing technology is equally effective when drawing fonts and images on Canvas.

As illustrated below, the left side represents the state without font smoothing enabled, while the right side shows it enabled:

Anti-aliasing technology generates some non-pure color pixels, the values of which are influenced by the color profile of the graphics card, potentially resulting in varying colors, referred to as noise. By drawing the same fonts and images on a sufficiently large canvas and calculating all pixel data, a relatively unique fingerprint data can be obtained.

2. Font Hinting Fine-tuning

A characteristic of fine-tuning is grid fitting, which involves adjusting the height and width of font characters to align with the pixel grid of the screen display. Images are displayed on the screen as a series of small square grids, and fonts may shift laterally to ensure correct display on the grid, thereby maintaining a roughly similar font shape and layout across different screens.

The following GIF image is a collection of canvas images from dozens of different users, providing a clear visual of the variations presented by the same code across different device environments.

As illustrated in the aforementioned image details, generally, we can invoke the toDataURL function to acquire the base64 data of a Canvas image, or obtain the IDAT block's CRC checksum from the data chunk of a PNG image generated from Canvas. Subsequently, we can compute the hash value of this string (be it base64 or CRC checksum), the specific algorithm varying across websites, to serve as the Canvas fingerprint.

Note: There are numerous reasons why Canvas fingerprints differ across various websites, such as the use of distinct strings (base64 or CRC checksum), and different hash algorithms (MD5, SHA, MUMUHASH, etc.) which can result in entirely unique Canvas fingerprints. However, the actual Canvas fingerprint is stable, meaning that under the same browser and device conditions, the Canvas fingerprint for a particular website remains constant. This stability forms the theoretical basis for using Canvas fingerprints as an auxiliary tool for user identification.