Canvas fingerprinting is one of the most powerful tracking techniques. Learn how it works and how to reduce your tracking risk.
Canvas fingerprinting works by asking your browser to draw text and shapes onto an invisible HTML5 canvas, then reading back the resulting pixels and hashing them into a short, stable identifier. Because every device renders those same drawing instructions slightly differently — depending on its GPU, graphics driver, operating system, and font engine — the hash becomes a quiet signature that follows you across sites without any cookie. This article goes well beyond the basics: how the pixels actually diverge, how much uniqueness canvas adds, how to tell when a site is fingerprinting you, and why some popular defenses can backfire.
How Canvas Fingerprinting Actually Works
The technique relies on the <canvas> element, which is meant for drawing graphics with JavaScript. A tracking script never needs to show that canvas on screen — it lives entirely in memory.
The flow is consistent across nearly every implementation:
- Create an off-screen canvas. A small canvas (often 200–300 px wide) is created but never attached visibly to the page.
- Draw a fixed scene. The script renders a predetermined string of text — frequently mixing fonts, colors, an emoji or two, and overlapping rectangles. Emoji and unusual Unicode are popular because they force the OS font stack to make rendering decisions.
- Read the pixels back. The script calls
toDataURL()to export the canvas as a Base64 PNG, orgetImageData()to read the raw RGBA byte array. - Hash the result. Those bytes are run through a hash function (commonly something like FNV or MurmurHash) to produce a compact fingerprint such as
e3b0c44298fc1c14.
The clever part is that the instructions are identical for everyone, but the output is not. Two visitors running the exact same script can produce different hashes, and the same visitor produces the same hash on every return visit — which is precisely what a tracker wants.
The canvas is never displayed. You will not see a flicker, a box, or any visual cue. This invisibility is exactly why canvas fingerprinting became so widespread for silent tracking.
Why the Pixels Differ Across Devices
If drawing "Hello" should be deterministic, why do the bytes change at all? Several layers of your system each introduce tiny, reproducible variations.
GPU and graphics driver
Anti-aliasing, sub-pixel rendering, and how curves are filled are all partly delegated to the GPU. An Intel integrated chip, an Apple Silicon GPU, and an NVIDIA discrete card will each round edge pixels differently. Even two machines with the same GPU model can diverge if their driver versions differ.
Font rasterization
The single biggest contributor is text rendering. The OS font engine — DirectWrite on Windows, Core Text on macOS, FreeType on Linux — decides how to turn glyph outlines into pixels. Hinting, gamma correction, and the exact anti-aliasing algorithm vary by platform and version, so the gray pixels along the edge of a letter "g" carry surprising amounts of distinguishing information.
Operating system and installed fonts
Whether a requested font exists determines whether the browser substitutes a fallback. An emoji might render as a flat outline on one system and a full-color glyph on another. The OS color-emoji set (Apple, Noto, Segoe) leaves an especially strong mark.
Browser engine and version
Chromium, Firefox, and WebKit each have their own canvas implementation. Color management and how toDataURL() encodes PNG data can shift between browser versions, which is why a browser update sometimes changes your canvas hash.
How Much Uniqueness Does Canvas Add?
Canvas is valuable to trackers not because it identifies you alone, but because it contributes a meaningful chunk of entropy — the measure of how much a signal narrows down who you are. In studies of fingerprinting in the wild, canvas has repeatedly ranked among the highest-entropy individual signals a passive site can read, on par with the full list of installed fonts.
That said, canvas rarely identifies a person by itself. Many people share common configurations — a stock Windows laptop on Chrome with default fonts will collide with millions of others. Its real power appears in combination: canvas plus WebGL, screen metrics, timezone, and language together push toward a near-unique fingerprint. For a fuller picture of how these signals stack, see our complete browser fingerprinting guide.
| Property | Canvas Fingerprinting |
|---|---|
| Storage required | None (no cookie, no localStorage) |
| Survives cache/cookie clearing | Yes |
| Survives incognito/private mode | Usually yes |
| Visible to the user | No |
| Typical entropy contribution | High among single passive signals |
| Defeated by clearing data | No |
| Defeated by IP change | No |
How Websites Use Canvas Fingerprints
Canvas fingerprinting is dual-use. The same mechanism serves both invasive and protective purposes:
- Cross-site tracking. Ad and analytics networks embedded on many sites read the canvas hash to recognize a returning visitor even after cookies are cleared, building a behavioral profile.
- Anti-fraud and account security. Banks and payment processors flag logins where the canvas fingerprint suddenly differs from a known device, helping catch account takeover.
- Bot and abuse detection. Headless browsers and automation frameworks often produce canvas outputs that are either too uniform or render in tell-tale ways, so fingerprinting helps separate real users from scripted traffic — see Bot Detection Techniques for how this works in practice.
- Rate limiting and abuse prevention. Services use the fingerprint as a stable key to throttle accounts evading limits with fresh cookies.
How to Detect Whether You're Being Canvas-Fingerprinted
You can't see the canvas, but you can watch for the behaviors that accompany it.
Watch the API calls
In a fingerprinting attempt, JavaScript calls getContext('2d'), then fillText(), then toDataURL() or getImageData() on a canvas that is never added to the visible page. Browser developer tools and certain privacy extensions can surface these calls.
A minimal detection hook
You can instrument the canvas API yourself to log suspicious reads:
// Detect scripts that read canvas pixels without displaying anything
(function watchCanvasReads() {
const origToDataURL = HTMLCanvasElement.prototype.toDataURL;
const origGetImageData = CanvasRenderingContext2D.prototype.getImageData;
HTMLCanvasElement.prototype.toDataURL = function (...args) {
if (!document.body.contains(this)) {
console.warn('[canvas-fp] toDataURL() on an off-screen canvas', this);
}
return origToDataURL.apply(this, args);
};
CanvasRenderingContext2D.prototype.getImageData = function (...args) {
console.warn('[canvas-fp] getImageData() reading pixels back', this.canvas);
return origGetImageData.apply(this, args);
};
})();
If you would rather see your own fingerprint than read code, the simplest route is to run BrowserInsight's fingerprint detection tool. It computes your live canvas hash, shows the WebGL and audio signals alongside it, and estimates how unique your overall fingerprint is.
Defenses and Their Tradeoffs
There is no single perfect defense, and — importantly — some popular options can make you more identifiable. Here is how the main approaches compare.
Uniformity (the Tor Browser approach)
The Tor Browser's strategy is to make every user look identical. It disables canvas readback by default and prompts before allowing it, so a script either gets a blank result or a value shared by the entire Tor population. Blending into a large, uniform crowd is the most robust defense — but it comes at the cost of a heavily standardized, sometimes restrictive browsing experience.
Randomization (Brave's farbling)
Brave takes a different path called farbling: it adds small, per-session, per-domain noise to canvas readback so your fingerprint changes on every site and every session. This breaks cross-site linking effectively. The subtle risk is that being randomized is itself detectable — and randomization that is implemented naively can paradoxically add entropy, since "a browser whose canvas is noisy" is a distinguishing trait. Well-designed farbling keeps the noise small and plausible to avoid this trap. For a deeper dive into how noise seeding determines whether randomization helps or backfires, see Canvas Noise vs Real Hash: Why Randomization Backfires.
Blocking extensions (CanvasBlocker)
Extensions like CanvasBlocker can block readback, return a fake value, or randomize per-domain. They give you fine control, but the same caveat applies: an unusual or overly aggressive spoof can stand out, and a poorly configured blocker may be a stronger signal than the canvas it hides.
Disabling JavaScript
Turning off JavaScript (via NoScript or similar) defeats canvas fingerprinting entirely, because the API can't run. The tradeoff is steep — most modern sites break without it — so this suits only the most security-sensitive workflows.
| Defense | How it works | Main tradeoff |
|---|---|---|
| Tor Browser uniformity | Everyone looks the same | Restricted, standardized experience |
| Brave farbling | Per-session noise breaks linking | Randomization can be detectable |
| CanvasBlocker | Block/spoof/randomize readback | Misconfiguration can backfire |
| Disable JavaScript | API never runs | Breaks most websites |
Frequently Asked Questions
Does clearing cookies remove my canvas fingerprint?
No. Canvas fingerprinting stores nothing on your device — it derives the identifier from how your hardware and software render graphics. Clearing cookies, cache, or site data has no effect on it.
Does private or incognito mode stop canvas fingerprinting?
Usually not. Private windows isolate cookies and history, but your GPU, drivers, and fonts are unchanged, so the canvas hash is typically the same as in a normal window. Private mode helps with storage-based tracking, not fingerprinting.
Can a website see that I'm using a canvas blocker?
Sometimes, yes. If your canvas returns an obviously fake, blank, or noisy value, a sophisticated script can infer that a protection is active. That's why uniformity (looking like everyone else) is often more robust than randomization (looking deliberately different).
Is canvas fingerprinting the same as WebGL fingerprinting?
They're related but distinct. Canvas reads 2D rendering of text and shapes; WebGL probes your GPU through 3D rendering and exposes vendor and renderer strings directly. They complement each other in a combined fingerprint — our WebGL fingerprinting deep dive covers the 3D side in detail.
