Damru
♥ Donate ★ GitHub

Canvas Fingerprinting: How It Works and How Research Tools Address It

Canvas fingerprinting is a browser identification technique that draws hidden graphics using the HTML5 Canvas API and reads back the pixel data to generate a hash that is unique — or near-unique — to a specific device and browser combination, enabling persistent tracking without cookies.

Unlike cookies, canvas fingerprints cannot be deleted by clearing browser storage. Unlike IP addresses, they persist across VPNs and network changes. This makes canvas fingerprinting one of the most durable signals in the modern web tracking and bot-detection toolkit — and one of the most actively studied in academic privacy research.

This page explains the mechanics of canvas fingerprinting, why it produces distinct results across devices, how detection services use it, and how research-oriented tools and Damru approach the challenge in authorized testing contexts.

The Mechanics of Canvas Fingerprinting

How the HTML5 Canvas API Works

The <canvas> element exposes a 2D drawing API and a WebGL 3D API that let JavaScript render shapes, text, gradients, and images directly in the browser. Normally this is used for data visualization, games, and image editing tools. When the rendering is complete, canvas.toDataURL() or getImageData() reads the pixel buffer back as a base64 string or raw RGBA array.

Why the Output Differs Across Devices

Even when the same drawing commands are executed, the rendered pixels are not identical across devices. Differences arise from:

The result is that a device + OS + GPU + browser version combination produces a consistent pixel hash across sessions, but differs from virtually every other combination.

The Standard Canvas Fingerprinting Method

A typical fingerprinting script follows this pattern:

// 1. Create an off-screen canvas
const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 50;
const ctx = canvas.getContext("2d");

// 2. Draw text with mixed fonts and Unicode characters
ctx.textBaseline = "alphabetic";
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.font = "11pt Arial";
ctx.fillText("BrowserLeaks,canvas,test", 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.font = "18pt Arial";
ctx.fillText("BrowserLeaks,canvas,test", 4, 45);

// 3. Read back pixel data and hash it
const dataURL = canvas.toDataURL();
const hash = md5(dataURL); // device-specific fingerprint

The hash is then sent to the tracking or detection server, often combined with WebGL, AudioContext, and font enumeration hashes to form a composite fingerprint score.

Canvas Fingerprinting in Bot Detection

Tracking networks and human-presence detection services use canvas fingerprints differently:

UseHow Canvas Fingerprinting Is Applied
Cross-site trackingLink a user’s activity across sites without cookies (third-party tracking pixels)
Session continuityRecognize returning visitors even after cookie deletion
Bot detectionIdentify headless browsers that produce synthetic, zero-noise, or suspiciously consistent canvas output
Account fraud detectionFlag multiple accounts sharing the same canvas hash
Device authenticationSoft-authenticate known devices as a second factor

The Headless Browser Tell

Headless Chromium running on a Linux server without a GPU renders canvas operations via SwiftShader (a software rasterizer). SwiftShader produces perfectly deterministic pixel output — no floating-point variance, no font hinting difference — that stands out statistically from the distribution of real user canvases. Detection models trained on real traffic can identify SwiftShader output with high confidence.

Research Approaches to Canvas Fingerprinting

Privacy and security researchers study canvas fingerprinting through three main approaches:

1. Canvas Noise Injection

Add small, randomized perturbations to the pixel output before toDataURL() reads it. The modified hash appears unique to each session while the visual output remains imperceptible to human users.

Limitation: Injecting noise via JavaScript content scripts can itself be detected — the Canvas API can be patched, and the patching can be detected by checking whether HTMLCanvasElement.prototype.toDataURL has been overridden.

2. Browser-Level Canvas Patching

Modify the browser’s rendering pipeline at the C++ or GPU layer before the data reaches JavaScript. This is harder to detect because the override happens inside the browser process rather than as a JavaScript monkey-patch.

Camoufox and Tor Browser take this approach, adding calibrated noise at the Skia/Firefox rendering level.

3. Using a Device with a Different GPU (Damru)

The most authentic form of canvas fingerprint diversity is to use a device with a genuinely different GPU. Android devices use ARM-based GPUs (Qualcomm Adreno, ARM Mali) whose rendering pipeline differs fundamentally from the x86 desktop GPUs used in server-side headless Chrome.

Damru runs Chrome for Android inside a Redroid container. The guest Android environment’s Chrome uses the host GPU via Android’s EGL/GLES stack, producing canvas output consistent with a real Android device rather than a Linux server running SwiftShader.

from damru import DamruSession
import asyncio

async def compare_canvas_hashes():
    """
    Research helper: collect canvas fingerprint hashes across
    multiple Damru session profiles to study inter-session variance.
    """
    profiles = ["pixel_7", "pixel_8", "samsung_s24"]
    results = {}

    for profile in profiles:
        async with DamruSession(
            device_profile=profile,
            randomize_canvas=True,    # Add calibrated noise layer
        ) as session:
            page = await session.new_page()
            await page.goto("https://browserleaks.com/canvas")
            # BrowserLeaks displays the computed canvas hash on the page
            hash_value = await page.inner_text("#canvas-fp")
            results[profile] = hash_value
            print(f"{profile}: {hash_value}")

    return results

asyncio.run(compare_canvas_hashes())

With randomize_canvas=True, Damru adds a per-session noise layer on top of the already-distinct Android GPU output, making successive sessions appear as different devices — useful for studying how detection models score fingerprint variance.

To run this comparison across dozens of device profiles in parallel, drive the worker fleet with DamruPool from the Damru instance manager.

Canvas vs. WebGL Fingerprinting

Canvas 2D and WebGL are related but distinct fingerprinting surfaces:

PropertyCanvas 2DWebGL
APICanvasRenderingContext2DWebGLRenderingContext / WebGL2
RendererSkia (Chrome) / Cairo (Firefox)GPU shader pipeline
Key signalsText rendering, gradient blendingRENDERER, VENDOR strings, shader output
EntropyMedium (font + GPU variation)High (GPU string is often exact model name)
Headless tellSwiftShader determinismSwiftShader in RENDERER string

WebGL’s UNMASKED_RENDERER_WEBGL extension directly exposes the GPU model string (e.g., ANGLE (NVIDIA GeForce RTX 4090 Direct3D11 vs_5_0 ps_5_0)), making it an extremely high-entropy signal. Android browsers report Adreno or Mali renderer strings, which are distinct from server GPU strings.

Privacy and Ethical Considerations

Canvas fingerprinting raises legitimate privacy concerns when used for tracking users across sites without consent. The EU’s ePrivacy Directive and interpretations of GDPR treat fingerprinting as personal data processing requiring a lawful basis. Authorized uses — security research, QA testing, fraud prevention on your own platform — differ fundamentally from covert cross-site tracking.

If you are building a detection system, consider providing users with transparency about fingerprinting and a meaningful opt-out. If you are researching fingerprinting, use controlled environments, authorized test sites, and do not deploy findings in ways that enable unconsented tracking.

FAQ

What is canvas fingerprinting? Canvas fingerprinting is a browser tracking technique that draws hidden graphics via the HTML5 Canvas API and reads back the pixel data to compute a hash. Because different GPU hardware, drivers, operating systems, and font renderers produce slightly different pixel outputs for the same drawing commands, the hash is unique or near-unique to a device–browser combination and persists across sessions without cookies.

How accurate is canvas fingerprinting? On its own, canvas fingerprinting has a false-positive rate and can be shared by devices with similar hardware configurations. In practice, trackers combine canvas hashes with WebGL renderer strings, AudioContext fingerprints, font lists, and screen metrics to build a composite fingerprint with accuracy exceeding 90% for re-identification in empirical studies.

Can canvas fingerprinting be blocked or randomized? Yes, through several methods: browser extensions that inject noise (Canvas Blocker), browser-level patches that add rendering noise at the C++ layer (Tor Browser, Camoufox), or using a device with a genuinely different GPU whose canvas output naturally differs from the fingerprint on record. Damru uses the last approach — running Chrome for Android on an Android GPU — and optionally adds a noise layer on top.

How does Damru address canvas fingerprinting in research? Damru runs Chrome for Android inside a Redroid container, so canvas rendering uses the Android GPU pipeline (Adreno/Mali via EGL/GLES), producing fingerprints distinct from x86 server-side SwiftShader output. The randomize_canvas=True option adds calibrated per-session pixel noise within perceptible limits, enabling researchers to study how detection systems score fingerprint variance across sessions in authorized test environments.