Every time your browser loads a page, it hands over a detailed report about itself — GPU model, installed fonts, how it renders a triangle wave through an audio processor, the exact floating-point output of a WebGL shader. None of this requires cookies. None of it requires login. The site doesn't even need to ask permission. It just reads.
This is browser fingerprinting. And if you're building multi-profile automation, running scraping pipelines, or doing any kind of work where account isolation matters, understanding how each of these signals is collected — and how to override it at the JavaScript level — is non-negotiable.
This article goes deep on four fingerprinting vectors that matter most in practice: Canvas, WebGL, AudioContext, and font enumeration. For each one, we'll cover how the collection works, what makes the output unique, and how to spoof it correctly. "Correctly" being the operative word — naive spoofing is often worse than no spoofing at all.
Why Fingerprinting Is Harder to Escape Than It Looks
A quick framing before getting into the code.
A browser fingerprint is stateless. Unlike a cookie, nothing is stored on your machine. The site runs JavaScript, reads a set of browser and hardware properties through standard Web APIs, hashes the combined output, and that hash becomes your identifier. Delete cookies, clear storage, rotate your IP — the fingerprint hash stays the same, because the underlying hardware and software stack hasn't changed.
The individual signals are largely mundane: screen resolution, timezone, language preferences, the list of fonts your OS has installed. None of these is unique on its own. The uniqueness comes from their combination. Research consistently shows that 80–90% of browser fingerprints are unique across the web, which makes fingerprinting more reliably identifying than IP-based tracking for most purposes.
For developers building automation or multi-account tooling, the practical implication is this: every browser profile running on the same machine will produce the same fingerprint unless you actively intercept and override the relevant APIs. Even across different browsers. Even across incognito windows. The fingerprint is a property of the hardware and OS, not the browser session.
The Four Core Fingerprinting Vectors

1. Canvas Fingerprinting Canvas fingerprinting exploits the fact that different hardware and OS configurations render the same drawing instructions slightly differently. The GPU, the graphics driver, the OS text rendering pipeline, and font hinting settings all introduce microscopic variations in pixel output. When you hash that pixel output, you get a stable per-device identifier. Here's the basic collection pattern a fingerprinting script uses: const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');

// Draw a combination of text and shapes to maximize rendering variation
ctx.font = '14px Arial';
ctx.fillStyle = '#f60';
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = '#069';
ctx.fillText('Browser fingerprint test 🖥️', 2, 15);
ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
ctx.fillText('Browser fingerprint test 🖥️', 4, 17);

const fingerprint = canvas.toDataURL(); // base64-encoded pixel data

The hash of that toDataURL() output is your Canvas fingerprint. Two identical-spec machines running identical OS versions will often still produce slightly different hashes due to driver-level differences.
Spoofing approach: deterministic noise injection
The naive approach — blocking toDataURL() entirely or returning a blank canvas — is immediately detectable. Any fingerprint checker will flag the absence of canvas data as suspicious, and platforms with serious anti-fraud systems will treat it as a bot signal.
The correct approach is noise injection at the prototype level. You intercept the canvas read methods and introduce a tiny, invisible perturbation to the pixel data — enough to change the hash, not enough to alter the visual rendering.
// Inject before any page scripts run (e.g., via evaluateOnNewDocument in Puppeteer)
(function() {
const PROFILE_SEED = 'your-profile-specific-seed-value';

// Simple seeded pseudo-random for deterministic noise
function seededRandom(seed) {
let s = seed.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
return function() {
s = (s * 9301 + 49297) % 233280;
return s / 233280;
};
}

const rng = seededRandom(PROFILE_SEED);

const origToDataURL = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type, ...args) {
const context = this.getContext('2d');
if (context) {
const imageData = context.getImageData(0, 0, this.width, this.height);
for (let i = 0; i < imageData.data.length; i += 4) {
// Add imperceptible noise to pixel values
imageData.data[i] = Math.min(255, imageData.data[i] + Math.floor(rng() * 2));
}
context.putImageData(imageData, 0, 0);
}
return origToDataURL.apply(this, [type, ...args]);
};

const origGetImageData = CanvasRenderingContext2D.prototype.getImageData;
CanvasRenderingContext2D.prototype.getImageData = function(...args) {
const imageData = origGetImageData.apply(this, args);
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] = Math.min(255, imageData.data[i] + Math.floor(rng() * 2));
}
return imageData;
};
})();

Two things are critical here. First, the noise must be deterministic per profile — seeded from a profile-specific value so the same hash is produced on every visit. If the Canvas fingerprint changes between sessions for the same profile, platforms will detect the instability. Second, the noise magnitude must be imperceptible — 1–2 pixel value units per channel is enough to change the hash without producing any visible artifact.

1. WebGL Fingerprinting WebGL goes deeper than Canvas because it queries the GPU directly. A fingerprinting script can pull the exact GPU vendor and renderer string, the full list of supported WebGL extensions (typically 30–50), shader precision formats, maximum texture sizes, and viewport dimensions. Each of these varies by hardware model and driver version. The most sensitive parameters are accessed through the WEBGL_debug_renderer_info extension: const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

// These two reveal the exact GPU model
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

// Output example: "Google Inc. (NVIDIA)" / "ANGLE (NVIDIA GeForce RTX 3080...)"
console.log(vendor, renderer);

// Full extension list also forms part of the fingerprint
const extensions = gl.getSupportedExtensions();

If you're running Puppeteer or Playwright in headless mode without spoofing, the renderer will typically report something like "Google SwiftShader" — which is an immediate bot signal, since no real user's browser reports that GPU.
Spoofing approach: getParameter override
Spoofing WebGL requires overriding getParameter on both WebGLRenderingContext and WebGL2RenderingContext prototypes. The override must happen before any WebGL context is created on the page.
(function() {
// Use a fingerprint from a real device in your target demographic
const SPOOF_VENDOR = 'Google Inc. (Intel)';
const SPOOF_RENDERER = 'ANGLE (Intel, Intel(R) UHD Graphics 620 Direct3D11 vs_5_0 ps_5_0, D3D11)';

const getParameterOrig = WebGLRenderingContext.prototype.getParameter;
WebGLRenderingContext.prototype.getParameter = function(parameter) {
// UNMASKED_VENDOR_WEBGL = 0x9245, UNMASKED_RENDERER_WEBGL = 0x9246
if (parameter === 0x9245) return SPOOF_VENDOR;
if (parameter === 0x9246) return SPOOF_RENDERER;
return getParameterOrig.call(this, parameter);
};

// Don't forget WebGL2
const getParameter2Orig = WebGL2RenderingContext.prototype.getParameter;
WebGL2RenderingContext.prototype.getParameter = function(parameter) {
if (parameter === 0x9245) return SPOOF_VENDOR;
if (parameter === 0x9246) return SPOOF_RENDERER;
return getParameter2Orig.call(this, parameter);
};
})();

One critical consistency requirement: the GPU string you spoof must be plausible relative to the rest of the profile. Claiming to be an Intel UHD 620 while your Canvas rendering output looks like NVIDIA, or claiming a Windows GPU while your User-Agent says macOS, creates exactly the kind of cross-signal inconsistency that detection systems look for. The renderer string, User-Agent, and platform all need to tell the same story.
This is also where the IP layer matters. A profile claiming to be a Windows laptop with a US timezone, an Intel GPU, and an English-US locale, running on a data-center IP in Singapore, is incoherent. The network layer has to match the fingerprint layer. Tools like NodeMaven provide residential and mobile IPs with city and ISP-level targeting specifically so the network signals align with the browser identity you're constructing.

1. AudioContext Fingerprinting
   AudioContext fingerprinting is the subtlest of the four vectors because it exploits hardware-level variation in how a device's audio stack processes a signal — and it does this entirely silently, with no audio actually played.
   The standard collection technique uses OfflineAudioContext to generate and process an audio signal in memory:
   function getAudioFingerprint() {
   return new Promise((resolve) => {
   const AudioCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
   // 1 channel, 5000 samples, 44100 Hz sample rate
   const context = new AudioCtx(1, 5000, 44100);

   // Generate a triangle wave oscillator at 1000 Hz
   const oscillator = context.createOscillator();
   oscillator.type = 'triangle';
   oscillator.frequency.value = 1000;

   // Route through a compressor to amplify hardware-level variation
   const compressor = context.createDynamicsCompressor();
   compressor.threshold.value = -50;
   compressor.knee.value = 40;
   compressor.ratio.value = 12;
   compressor.attack.value = 0;
   compressor.release.value = 0.25;

   oscillator.connect(compressor);
   compressor.connect(context.destination);
   oscillator.start(0);

   context.oncomplete = (event) => {
   // The channel data contains floating-point audio samples
   // Their exact values vary by hardware audio stack
   const channelData = event.renderedBuffer.getChannelData(0);
   const hash = channelData.slice(4500).reduce((acc, val) => acc + Math.abs(val), 0);
   resolve(hash.toString());
   };

   context.startRendering();
   });
   }

The floating-point output differs across devices because audio processing involves hardware-level DSP operations and floating-point math whose precision varies by audio driver, OS audio subsystem, and hardware. The hash of the summed channel data is a stable per-device identifier.
Spoofing approach: getChannelData override
You can't easily prevent the OfflineAudioContext from rendering — blocking it entirely is detectable. The correct approach is to intercept the buffer read and add deterministic noise to the channel data output.
(function() {
const PROFILE_SEED = 'your-profile-specific-seed-value';

function seededNoise(seed) {
let n = seed.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
return function() {
n = (n * 1664525 + 1013904223) & 0xffffffff;
return (n >>> 0) / 0xffffffff * 0.0001 - 0.00005;
};
}

const noise = seededNoise(PROFILE_SEED);

const origGetChannelData = AudioBuffer.prototype.getChannelData;
AudioBuffer.prototype.getChannelData = function(channel) {
const data = origGetChannelData.call(this, channel);
const result = new Float32Array(data.length);
for (let i = 0; i < data.length; i++) {
result[i] = data[i] + noise();
}
return result;
};
})();

The noise magnitude here matters. Audio fingerprinting scripts sum floating-point values, so even sub-milliunit perturbations change the final hash. The key is that the noise must be seeded — not random — so the same hash is produced every time the profile runs.

1. Font Enumeration Browsers don't expose a direct API to list installed fonts. Fingerprinting scripts work around this by attempting to render text in specific fonts and measuring the dimensions of the output. If the text renders at the same dimensions as a known fallback font (usually monospace, sans-serif, or serif), the font isn't installed. If the dimensions differ, the font is present. function detectFont(fontName) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const testString = 'mmmmmmmmmmlli'; const baseFonts = ['monospace', 'sans-serif', 'serif'];

function getTextWidth(font) {
ctx.font = 72px ${font};
return ctx.measureText(testString).width;
}

const baseWidths = baseFonts.map(getTextWidth);

ctx.font = 72px '${fontName}', ${baseFonts[0]};
const testWidth = ctx.measureText(testString).width;

// If the width matches none of the base font widths, the target font is installed
return !baseWidths.includes(testWidth);
}

// Test for platform-specific fonts
const fonts = [
'Arial', 'Calibri', 'Cambria', 'Segoe UI', // Windows
'Helvetica', 'San Francisco', 'Menlo', // macOS
'Ubuntu', 'Noto Sans', 'DejaVu Sans', // Linux
'Roboto', 'Droid Sans' // Android/Chrome OS
];

const installedFonts = fonts.filter(detectFont);

The list of installed fonts is platform-specific in a meaningful way. A machine running Windows 11 will have Calibri, Cambria, Segoe UI, and Consolas. A macOS machine will have Helvetica Neue, San Francisco, and Menlo. A Linux machine running Ubuntu will have DejaVu Sans and Ubuntu. This gives platforms a reliable signal for identifying both the OS and potentially the user's locale (language-specific fonts like Noto CJK or Arabic Typesetting).
Spoofing approach: measureText interception
The cleanest approach is to override CanvasRenderingContext2D.prototype.measureText to return the base font width for any font that shouldn't appear in your profile.
(function() {
// Define only the fonts appropriate for your profile's claimed OS/locale
const ALLOWED_FONTS = new Set([
'Arial', 'Calibri', 'Cambria', 'Comic Sans MS',
'Courier New', 'Georgia', 'Impact', 'Segoe UI',
'Times New Roman', 'Tahoma', 'Trebuchet MS', 'Verdana'
// Standard Windows 11 fonts — match to your UA's claimed OS
]);

const origMeasureText = CanvasRenderingContext2D.prototype.measureText;
CanvasRenderingContext2D.prototype.measureText = function(text) {
const fontFamily = this.font.match(/(?:^|\s)([\w\s]+)(?:,|$)/)?.[1]?.trim();
if (fontFamily && !ALLOWED_FONTS.has(fontFamily)) {
// Return the width of the fallback font for unlisted fonts
const ctx = this;
const originalFont = ctx.font;
ctx.font = ctx.font.replace(fontFamily, 'monospace');
const result = origMeasureText.call(ctx, text);
ctx.font = originalFont;
return result;
}
return origMeasureText.call(this, text);
};
})();

The font list in your override needs to match the OS claimed in your User-Agent. A Windows profile with macOS-exclusive fonts installed is a contradiction detection systems will catch.
Putting It Together: Consistency Is the Hard Part
Each of these spoofing techniques works in isolation. The difficult engineering problem is making them consistent with each other and with the rest of the profile.
Detection systems don't just look at each signal independently. They look for coherence across the whole profile:
Canvas rendering output should be consistent with the claimed GPU (WebGL renderer string)
Fonts should match the platform claimed in the User-Agent
AudioContext processing characteristics should be stable across sessions
The User-Agent should be internally consistent: OS version, browser version, platform, and Client Hints headers should all tell the same story
Timezone and language should match the proxy's geographic location
The last point is where network-layer configuration ties into the fingerprint layer. A browser profile claiming to be in New York — with a US locale, en-US language, and an EST timezone — but connecting through a Thai data-center IP has an obvious inconsistency. Using residential or mobile proxies geo-matched to the profile's claimed location is what closes that gap at the IP and network level.
Testing Your Profile
Before deploying any profile at scale, run it against the standard fingerprint testing tools:
BrowserLeaks (browserleaks.com) — tests Canvas, WebGL, fonts, WebRTC, and JS environment. Gives you direct visibility into what each API is exposing.
CreepJS (abrahamjuliot.github.io/creepjs) — the most aggressive public fingerprint analyzer. Specifically tests for spoofing inconsistencies, not just individual signal values. If your profile has cross-signal contradictions, CreepJS will find them.
Pixelscan (pixelscan.net) — commonly used as a reference in anti-detect browser communities. Useful for a quick pass/fail check on basic consistency.
The workflow is: build your profile, run it against all three, fix every inconsistency. Pay particular attention to CreepJS — it's designed specifically to catch the kind of partial spoofing that passes simpler checkers.
What the IP Layer Still Has to Do
Everything covered here operates at the JavaScript/browser API layer. It changes what fingerprinting scripts see when they query the browser. It doesn't change anything at the network layer.
Platforms that are serious about account integrity check both layers independently. A perfect browser fingerprint on a flagged data-center IP still triggers risk signals. Consistency between the fingerprint layer (what the browser reports) and the network layer (what the IP and TLS fingerprint say) is what makes a profile actually hold up under scrutiny.
The fingerprint setup covered here handles the browser side. The network side is a separate problem, and it requires its own clean infrastructure — residential or mobile IPs matched to the profile's claimed geography, with stable session behavior over time. These two layers together are what serious fingerprint isolation actually looks like in practice.