Canvas

Canvas fingerprint component works so that the browser is instructed to draw a simple image from instructions. This includes things like a simple gradiant, some text, an overlay etc.

When the resulted picture is inspected pixel-by-pixel, each channel separately, small differences arise. This is because even when the instructions are the same, the resulting picture has small variations - small enough for the human eye not to notice, but even a single bit difference is enough.

There are browsers that add noise to images produced by this method, which makes it harder for canvas fingerprinting to be used. In some cases, the noise can be weeded out by calculating the picture a few times and taking the most common values.

However, if the noise only changes between web sessions, this approach doesn't work, and the canvas needs to be excluded from the components.

The canvas component looks like this:

Example

"canvas": {
    "commonPixelsHash": "99592faf86726fa69469ff29a23a82bb"
},

Code

Check out the implementation