HTML5 Canvas fingerprinting is one of the most widely deployed cookie-less tracking methods on the web. It operates entirely in the background, drawing hidden canvas graphics when you load a page, and extracting a unique hardware signature of your computer.
This article details the mechanics of canvas tracking, why it is so unique, and the technical strategies for blocking it.
The Technical Execution of a Canvas Probe
Canvas fingerprinting works by utilizing your browser's HTML5 Canvas element — a tool designed to draw shapes and graphics dynamically via JavaScript.
To generate a fingerprint, the script runs the following tasks:
- Creates a Hidden Canvas: The script creates a
<canvas>DOM element, keeping it hidden from the viewport so you don't see it rendering. - Applies Complex Graphics: It draws a predetermined test pattern containing a specific string of text (often including emojis, special characters, and multiple font sizes) overlaying gradients, drop shadows, and blending modes.
- Converts Pixels to Data: The script reads the raw pixel data from the canvas context using
canvas.toDataURL("image/png"), which converts the drawn pixels into a base64-encoded PNG data string. - Hashes the Output: The base64 string is hashed using a non-cryptographic algorithm like MurmurHash3 to produce a short fingerprint key (e.g.,
f3e4a5d6).
// A simple canvas fingerprint generator
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.fillText("BrowserProbe, testing 🕵️♂️!", 2, 15);
const hash = murmurhash3(canvas.toDataURL());Why Are Canvas Hashes Unique?
You might expect that drawing the same text with the same font would produce the identical image on every computer. In reality, the output pixel array is highly dependent on your system's hardware and software stack:
- Graphics Processing Unit (GPU): Different GPUs (Intel, NVIDIA, AMD, Apple M-Series) use different rasterization and anti-aliasing engines, leading to microscopic differences in sub-pixel colors.
- Font Rendering Engines: Operating systems handle font smoothing (ClearType on Windows vs. Quartz on macOS) differently, producing slight variations in text curves and outline geometries.
- Drivers and Browser Versions: GPU drivers and the browser's graphics rendering pipeline (ANGL, WebGL wrappers, etc.) introduce floating-point calculation differences that affect rendering coordinates.
Because of these hardware-level dependencies, the generated image hash is highly unique, acting as an excellent signature for tracking.
How to Block Canvas Trackers
Defending your system against canvas fingerprinting requires either blocking the API altogether or altering its output.
1. Blanking/Blocking
The simplest defense is block-level protection. When a website calls toDataURL(), the browser blocks the call or returns an empty transparent image. The Tor Browser utilizes this method, prompting you for permission whenever a site attempts to read canvas data.
*The drawback*: Returning a blank canvas is highly unusual and immediately signals to the server that you are attempting to hide, making you stand out as a highly unique entity (increasing your overall behavioral uniqueness).
2. Canvas Randomization (Farbling)
The most elegant defense is randomization. Brave and privacy tools like the Canvas Blocker extension intercept the canvas drawing functions and inject subtle, invisible mathematical noise into the output data.
This noise changes slightly on every page load or visit. Because the generated base64 image data changes, the resulting hash is completely different every time you reload, rendering persistent tracking databases useless.
Check out BrowserProbe's Canvas Fingerprint Tool to view the actual hidden graphic generated by your browser and examine your device's fingerprint hash in real time.