Canvas fingerprinting
The Same Image Looks Slightly Different on Every Device
A website can ask every browser to draw the same tiny scene. Differences in fonts, software, and graphics hardware can leave a repeatable pattern in the pixels—and that pattern can become one part of a broader browser fingerprint.
- Storage
- None required
- Visible to you
- Usually not
- Useful alone
- Sometimes
- Useful in a profile
- More often
drawText + shape + gradientCanvas Fingerprinting Demo
How rendering differences can be used to identify returning users
This local demonstration draws a small scene and hashes its pixels. Shift the scene by one pixel and the picture still looks almost identical—but the digest changes completely.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '28px sans-serif';
ctx.fillText('404 privacy', x, 54);
ctx.fillRect(18, 76, 156, 18);
const pixels = ctx.getImageData(
0, 0, canvas.width, canvas.height
);
// The page can now hash or compare the pixels.Run the demonstrationThe one-pixel option is an illustration, not a fingerprinting test. It shows why tiny render differences are easy for software to detect even when people barely notice them.
From drawing to recognition
The image generates a machine readable ID
Canvas is useful to a tracker because the full process is quiet, repeatable, and easy to automate. The drawing is only the probe.
- 01
A script gives drawing instructions
Text, shapes, colors, gradients, and blending rules are placed on a canvas—often outside the visible page.
- 02
Your graphics stack renders them
The browser, font rasterizer, operating system, graphics libraries, GPU, and driver all influence the final pixels.
- 03
JavaScript reads the pixels back
Methods such as getImageData() or toDataURL() turn the rendered scene into data the page can inspect.
- 04
The output becomes a signal
A digest makes the image easy to compare. Trackers can combine it with other signals and look for the same pattern later.
Pixel comparison
A few altered pixels can produce a very different digest.
Antialiasing changes the partially transparent pixels around a glyph. Font hinting, color management, compositing, and GPU behavior can all nudge those edge values.
A cryptographic digest amplifies that difference: similar images do not produce similar hashes. That makes a large pixel buffer compact and fast to compare.
Cookie versus fingerprint
A fingerprint can be reconstructed
Both can help link visits, but they cross a reset in different ways.
The site gives the browser an ID.
- Visit 1Store
ID=ABC - Visit 2Send
ID=ABC - Clear cookiesStored ID removed
- Visit 3No cookie ID to return
The site asks the browser to render again.
- Visit 1Measure
HASH=XYZ - Visit 2Measure
HASH=XYZ - Clear cookiesStored state removed
- Visit 3Recompute
HASH=XYZ
This is a conceptual comparison. Real recognition systems may rotate values, tolerate small changes, and use server-side history rather than matching one hash exactly.
One signal, not an identity
Canvas hashing is one of many methods
A canvas value may be shared by many people or change after an update. An observer gains confidence by comparing it with other signals that describe the same browser and device.
See the complete fingerprint →What changes the output?
Change the renderer, not just the route.
VPNs and storage controls still solve real privacy problems. They simply operate at different layers than canvas rendering.
| Action | Canvas output | Why |
|---|---|---|
| Clear cookies | Usually unchanged | Removes stored state, not the graphics stack. |
| Open a private window | Usually unchanged | Creates a separate local session; rendering may remain the same. |
| Change VPN server | Usually unchanged | Changes the network path and IP, not local rendering. |
| Change browser, OS, fonts, GPU, or driver | Can change | Changes one or more parts of the rendering path. |
| Use browser-level fingerprinting defenses | Can change or restrict | May standardize, perturb, or gate canvas readback. |
Meaningful defenses
Browsers have three broad choices.
No strategy is free: stronger resistance can affect compatibility or make an unusual configuration stand out.
Standardize
Make many users return the same or less distinctive output, so one person is harder to separate from the crowd.
Goal: reduce diversityPerturb
Introduce controlled changes to readback so the value is less stable across sites or browsing sessions.
Goal: reduce linkabilityGate or block
Require permission, return limited data, or prevent suspicious readback while preserving ordinary drawing when possible.
Goal: reduce accessA useful claim should explain whether the browser standardizes, perturbs, or restricts canvas—and whether that behavior is default, site-specific, or opt-in.
Keep exploring