---
title: "How browser fingerprinting works: a developer's guide — TraceTail"
description: "Canvas, WebGL, fonts and the other browser traits behind a fingerprint: what each one measures, why it differs between devices, and how TraceTail turns them into a visitor ID."
url: https://tracetail.io/blog/how-browser-fingerprinting-works
updated: 2026-10-04
---

# How browser fingerprinting works: a developer's guide

Canvas, WebGL, fonts and the other browser traits behind a fingerprint: what each one measures, why it differs between devices, and how TraceTail turns them into a visitor ID.

_TraceTail Team · published February 15, 2025 · updated October 4, 2026 · 4 min read_

Browser fingerprinting recognizes a browser by the traits it exposes to every web page: how it draws graphics, which fonts are installed, the size of the screen, the language and time zone it reports. No single trait is unique, but together they describe a browser precisely enough to recognize it on its next visit, with nothing stored on the device.

No cookies. No local storage. No login.

This guide walks through the main techniques, why they work, and how TraceTail turns them into a visitor ID.

## The core idea

Every browser answers questions about the device it runs on. Individually the answers are common: millions of people have a 1920×1080 screen or an English locale. The _combination_ is what's distinctive.

Think of describing a person: "brown hair" narrows nothing down, but "brown hair, 1.85 m, left-handed, size 46 shoes, lives in Lisbon" gets specific fast. Fingerprinting works the same way, using answers the browser gives to any page that asks.

## Canvas fingerprinting

The Canvas API lets a page draw shapes and text and read back the pixels. The same drawing commands produce slightly different pixels on different machines, because the output depends on:

- **The GPU and its driver**: anti-aliasing, gradients and curves are rendered differently.
- **The operating system's text rendering**: each platform rasterizes fonts its own way.
- **The browser's graphics stack**: the same GPU can produce different output in different browsers.

A simplified version:

```javascript
function canvasSignature() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#f60';
  ctx.fillRect(0, 0, 120, 40);
  ctx.fillStyle = '#069';
  ctx.font = '16px Arial';
  ctx.fillText('Hello, TraceTail', 4, 26);

  // The pixel data differs subtly from machine to machine.
  return canvas.toDataURL();
}
```

The result is hashed into a short signature. Two devices with different graphics hardware or operating systems almost always produce different signatures.

## WebGL fingerprinting

WebGL exposes the graphics stack more directly. With the `WEBGL_debug_renderer_info` extension a page can read the GPU vendor and model:

```javascript
const gl = document.createElement('canvas').getContext('webgl');
const info = gl.getExtension('WEBGL_debug_renderer_info');

gl.getParameter(info.UNMASKED_VENDOR_WEBGL);   // e.g. "Google Inc. (Apple)"
gl.getParameter(info.UNMASKED_RENDERER_WEBGL); // e.g. "ANGLE (Apple, Apple M1 Pro, OpenGL 4.1)"
```

Beyond these strings, fingerprinting libraries can also read supported extensions and parameter limits, or render a 3D scene and hash the output.

## Font detection

The set of installed fonts differs between operating systems and between people who install their own. A page can't list fonts directly, but it can measure text: if a font is installed, text drawn in it has a different width than the fallback font. Testing a list of fonts this way reveals which ones are present.

## Audio fingerprinting

The Web Audio API processes sound through a pipeline that differs slightly between platforms, so rendering a fixed signal and hashing the result is another known technique. TraceTail doesn't use it.

## Everything else

Browsers also report simpler traits that add up:

- **Navigator properties**: language, platform, CPU core count, approximate memory, touch support
- **Screen**: width, height and color depth
- **Locale**: the IANA time zone from `Intl.DateTimeFormat`

## Putting it together with TraceTail

You don't need to build any of this. TraceTail's browser SDK collects 40+ signals (the browser and operating system family, language, platform, cookie setting, screen size and color depth, time zone, CPU cores, touch points, device memory, a canvas signature, the WebGL vendor and renderer, and checks for 24 common fonts) and hashes them into a visitor ID that starts with `fp3_`:

```javascript
import { TraceTail } from '@tracetail/js';

const tracetail = new TraceTail({ apiKey: 'YOUR_API_KEY', endpoint: 'https://tracetail.io/api' });
const { visitorId } = await tracetail.generateFingerprint();
```

Send that `visitorId` to your backend along with the request you want to recognize, such as a sign-in, a signup or a checkout, and compare it with the IDs you've seen before. The ID is computed in milliseconds, it's the same in normal and incognito windows, and TraceTail identifies returning visitors with 99.6% accuracy.

## Why not just use cookies?

Cookies are easy to clear, blocked by privacy tools, and private windows throw them away. A fingerprint survives all three, which is why it's useful for recognizing returning devices in fraud prevention, bot protection and analytics.

They solve different problems, though. Cookies are the right tool for sessions and preferences; fingerprinting is the right tool for recognizing a device. Most applications use both.

## Privacy

Fingerprinting is personal data processing in many jurisdictions. In the EU, the ePrivacy Directive and the GDPR apply: you need a legal basis, and often consent. Be open with your users about what you collect and why.

Know what your provider keeps, too. Without an API key, the SDK computes the visitor ID in the browser and sends nothing to TraceTail. With an API key, TraceTail stores each visitor ID together with the browser signals the SDK collected, the IP address and the user agent, until 180 days after that visitor's last visit. You can erase a visitor at any time from Settings in your dashboard, or with `DELETE /api/visitors/:visitorId` while signed in.

## Next steps

- [See your own visitor ID](https://tracetail.io/live-demo)
- [Read the documentation](https://tracetail.io/docs)
- [Create a free account](https://tracetail.io/auth): 1,000 requests a month, no credit card required

Tags: Browser fingerprinting, Canvas, WebGL, Fonts