← Back to Blog
Tracking·7 min read

Canvas Fingerprinting: Renders, Hashes, and Silent Tracking

HTML5 Canvas fingerprinting draws a known graphic, reads the rendered pixels, and summarizes the output. The operation can run in the background and contribute a rendering signal without writing a cookie.

This article explains the mechanics, why results can vary across configurations, and the tradeoffs of common defenses.

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:

  1. Creates a Hidden Canvas: The script creates a <canvas> DOM element, keeping it hidden from the viewport so you don't see it rendering.
  2. 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.
  3. 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.
  4. Hashes the Output: The base64 string is hashed using a non-cryptographic algorithm like MurmurHash3 to produce a short fingerprint key (e.g., f3e4a5d6).
javascript
// 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 Can Canvas Results Differ?

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 (including ANGLE and platform graphics libraries) can affect rendering details.

Many devices still produce the same canvas result, while some configurations differ. Population data is required to estimate how identifying a given result is; the hash alone contains no proof of uniqueness.

How to Block Canvas Trackers

Defending your system against canvas fingerprinting requires either blocking the API altogether or altering its output.

1. Blanking/Blocking

One defense is to gate or standardize canvas reads. Privacy-focused browsers may return modified output or require user interaction for some extraction paths.

*The tradeoff*: Blocking can break legitimate graphics features, and an uncommon blocking behavior may itself become another observable signal.

2. Canvas Randomization (Farbling)

Another defense is scoped randomization. Browsers such as Brave can alter selected canvas outputs using values scoped by site and session.

This can make a stable cross-site identifier harder to obtain without forcing every same-page read to change. It increases tracking cost but does not guarantee anonymity.

Use BrowserProbe's Canvas Fingerprint Tool to view the test graphic and its repeatable sample ID. Matching or differing IDs are evidence about this rendering test—not proof of identity.