browserscan.net Canvas Fingerprint Pure-JS Technical Report

Join my Discord community to learn, share, and discuss together: https://discord.gg/rX2vkNNW

Quick Conclusion

The /canvas page on browserscan.net splits the Canvas fingerprint into two stages:

• It first draws a text canvas and calls canvas.toDataURL() twice to check output stability.


• If the two text dataURLs differ, the result is "unstable".


• If they are stable, it draws a geometry canvas and reads geometryDataURL.


• The final displayed and reported canvasHash is:
  

canvasHash = SHA1(geometryDataURL)

Important: the final hash input is the complete PNG dataURL of the geometry canvas, not the text canvas.

This directory contains canvas_fp_pure.js, which reproduces:

• the Canvas drawing instructions


• the stability decision


• pure-JS SHA1


• PNG dataURL length and chunk/CRC helper parsing

Logic Chain

The page-level logic reduces to:

const { text, geometry } = await T0();



const isStable = text !== "unstable";

const canvasHash = isStable ? SHA1(geometry).toString() : geometry;

The core collector reduces to:

async function T0() {

  const [canvas, ctx] = createCanvas2d();



  if (!supportCanvasPngDataUrl(canvas, ctx)) {

    return {

      winding: false,

      text: "unsupported",

      geometry: "unsupported",

    };

  }



  const winding = checkEvenOddWinding(ctx);



  await drawText(canvas, ctx);

  const text1 = canvas.toDataURL();

  const text2 = canvas.toDataURL();



  if (text1 !== text2) {

    return {

      winding,

      text: "unstable",

      geometry: "unstable",

    };

  }



  await nextTick();

  drawGeometry(canvas, ctx);



  return {

    winding,

    text: text1,

    geometry: canvas.toDataURL(),

  };

}

Text Canvas

The text canvas is only used for stability checking. It is not directly hashed.

canvas.width = 240;

canvas.height = 60;



ctx.textBaseline = "alphabetic";



ctx.fillStyle = "#f60";

ctx.fillRect(100, 1, 62, 20);



ctx.fillStyle = "#069";

ctx.font = '11pt "Times New Roman"';

ctx.fillText("Cwm fjordbank gly 😃", 2, 15);



await nextTick();



ctx.fillStyle = "rgba(102, 204, 0, 0.2)";

ctx.font = "18pt Arial";

ctx.fillText("Cwm fjordbank gly 😃", 4, 45);

Stability decision:

const text1 = canvas.toDataURL();

const text2 = canvas.toDataURL();



if (text1 !== text2) {

  canvasHash = "unstable";

}

Geometry Canvas

After the text canvas is stable, the same canvas is resized to 122 x 110 and redrawn. This geometry dataURL is the SHA1 input.

canvas.width = 122;

canvas.height = 110;



ctx.globalCompositeOperation = "multiply";



ctx.fillStyle = "#f2f";

ctx.beginPath();

ctx.arc(40, 40, 40, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();



ctx.fillStyle = "#2ff";

ctx.beginPath();

ctx.arc(80, 40, 40, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();



ctx.fillStyle = "#ff2";

ctx.beginPath();

ctx.arc(60, 80, 40, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();



ctx.fillStyle = "#f9c";

ctx.arc(60, 60, 60, 0, Math.PI * 2, true);

ctx.arc(60, 60, 20, 0, Math.PI * 2, true);

ctx.fill("evenodd");



const geometryDataURL = canvas.toDataURL();

const canvasHash = SHA1(geometryDataURL);

Winding Check

winding is an auxiliary result. It is not part of the final hash input.

ctx.rect(0, 0, 10, 10);

ctx.rect(2, 2, 6, 6);



const winding = !ctx.isPointInPath(5, 5, "evenodd");

Environment and Anti-Detection Fields

The page also computes capability and anti-detection fields. These are displayed and reported, but they do not change the main hash formula when the canvas is stable.

The reported object looks like:

{

  type: "CANVAS_DETAIL",

  canvasHash,

  supportContext2d,

  supportTillText,

  supportDataUrl,

  supportOffscreenCanvas,

  canvasNative,

  isStable,

  isNotAntiBrowser

}

Trace Evidence Summary

The dropped domtrace/jscall/http evidence shows the script relationship:

Key DOM calls observed in the main flow:

Note: DOM trace string logging truncates long strings at 4000 characters. Long toDataURL values in the trace can confirm call order and prefixes, but they must not be treated as complete PNG dataURLs or final hash samples. The final hash must be computed from the runtime-complete geometryDataURL.

Direct Runtime Verification

A fresh run of https://www.browserscan.net/canvas captured this runtime CANVAS_DETAIL:

{

  "type": "CANVAS_DETAIL",

  "canvasHash": "ab684eb07ee596f8ed673c7e4eaaaa3f061195d0",

  "supportContext2d": true,

  "supportTillText": true,

  "supportDataUrl": true,

  "supportOffscreenCanvas": true,

  "canvasNative": true,

  "isStable": true,

  "isNotAntiBrowser": true

}

In the same run, the T0() toDataURL() sequence was:

Verification conclusion:

• The runtime page took the stable branch: isStable=true.


• The final canvasHash is a 40-character SHA1 hex string.


• The source stable branch is SHA1(geometry).toString().


• The runtime writer output in CANVAS_DETAIL.canvasHash is consistent with that branch.


• The exact hash may change across Canvas rendering environments and PNG encoder details; the stable part is the formula and flow, not a fixed hash constant.

ruyiPage Same-Context Strong Verification

Using the C:\ruyipage automation framework, the verification was run inside the same browserscan page context:

1. Read the page's native displayed 40-character canvasHash.


2. Inject canvas_fp_pure.js into the current page.


3. Run the restored collectCanvasFingerprint(document) with the page's real document/canvas.


4. Compare the page-native hash with the restored local hash.

Result:

{

  "ok": true,

  "pageHashBeforeInject": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",

  "verify": {

    "pageHash": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",

    "localHash": "979686afccc6b098f6ccc9b0122c4ea56ce1bd13",

    "matches": true,

    "stable": true,

    "winding": true,

    "textLength": 7806,

    "geometryLength": 8750,

    "geometryBytes": 6544,

    "geometryPngCrcOk": true,

    "geometryChunkTypes": ["IHDR", "IDAT", "deBG", "IEND"],

    "readyState": "complete",

    "location": "https://www.browserscan.net/canvas"

  }

}

This proves, in the same browser page environment:

• The page's own canvasHash exactly matches canvas_fp_pure.js.


• The text canvas is stable.


• The geometry PNG is complete and passes CRC validation.


• The restored drawing flow and SHA1 logic match the actual browserscan execution.

Validation script: ruyipage_verify_browserscan.py


Validation output: ruyipage_verify_result.json

canvas_fp_pure.js Usage

Self-test:

node --check canvas_fp_pure.js

node canvas_fp_pure.js --self-test

Pure hash computation from existing dataURLs:

const fp = require("./canvas_fp_pure");



const result = fp.computeCanvasHashFromDataUrls({

  text1: firstTextDataURL,

  text2: secondTextDataURL,

  geometry: geometryDataURL,

});



console.log(result);

Stable output:

{

  stable: true,

  text: firstTextDataURL,

  geometry: geometryDataURL,

  hash: SHA1(geometryDataURL)

}

Unstable output:

{

  stable: false,

  text: "unstable",

  geometry: "unstable",

  hash: "unstable"

}

Run the full collection inside a real browser Canvas environment:

<script src="./canvas_fp_pure.js"></script>

<script>

  BrowserScanCanvasFP.collectCanvasFingerprint(document).then(console.log);

</script>

Main API:

Pure-Computation Boundary

The browserscan algorithm itself can be reproduced as pure logic:

stable = textDataURL1 === textDataURL2;

canvasHash = stable ? SHA1(geometryDataURL) : "unstable";

However, geometryDataURL is not generated by a pure hash algorithm. It is a Canvas rendering artifact affected by:

• fonts


• anti-aliasing


• graphics stack


• color blending


• PNG encoder behavior


• Canvas noise or anti-fingerprinting policy

The practical engineering boundary is:

• a real Canvas implementation, or an equivalent renderer, produces text1/text2/geometry
  


• 
  canvas_fp_pure.js performs the stability decision, SHA1, and helper parsing

That is the fully restored pure-computation part of the browserscan.net Canvas fingerprint.