Skip to content

Commit

Permalink
Render to a new webgl canvas to ensure re-entrancy isn't an issue
Browse files Browse the repository at this point in the history
  • Loading branch information
jonathanKingston committed Apr 30, 2023
1 parent a3edaf3 commit 8d0d99e
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 11 deletions.
35 changes: 33 additions & 2 deletions src/canvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,23 @@ function createShader (gl, type, source) {
return shader
}

/**
* @typedef {Object} OffscreenCanvasInfo
* @property {HTMLCanvasElement | OffscreenCanvas} offScreenCanvas
* @property {CanvasRenderingContext2D | WebGL2RenderingContext | WebGLRenderingContext} offScreenCtx
* @property {WebGL2RenderingContext | WebGLRenderingContext} [offScreenWebGlCtx]
*/

/**
* @param {HTMLCanvasElement | OffscreenCanvas} canvas
* @param {string} domainKey
* @param {string} sessionKey
* @param {any} getImageDataProxy
* @param {CanvasRenderingContext2D | WebGL2RenderingContext | WebGLRenderingContext} ctx?
* @param {boolean} [shouldCopy2dContextToWebGLContext]
* @returns {OffscreenCanvasInfo | null}
*/
export function computeOffScreenCanvas (canvas, domainKey, sessionKey, getImageDataProxy, ctx) {
export function computeOffScreenCanvas (canvas, domainKey, sessionKey, getImageDataProxy, ctx, shouldCopy2dContextToWebGLContext = false) {
if (!ctx) {
// @ts-expect-error - Type 'null' is not assignable to type 'CanvasRenderingContext2D | WebGL2RenderingContext | WebGLRenderingContext'.
ctx = canvas.getContext('2d')
Expand Down Expand Up @@ -137,7 +146,29 @@ export function computeOffScreenCanvas (canvas, domainKey, sessionKey, getImageD

offScreenCtx.putImageData(imageData, 0, 0)

return { offScreenCanvas, offScreenCtx }
/** @type {OffscreenCanvasInfo} */
const output = { offScreenCanvas, offScreenCtx }
if (shouldCopy2dContextToWebGLContext) {
const offScreenWebGlCanvas = document.createElement('canvas')
offScreenWebGlCanvas.width = canvas.width
offScreenWebGlCanvas.height = canvas.height
let offScreenWebGlCtx
if (ctx instanceof WebGLRenderingContext) {
offScreenWebGlCtx = offScreenWebGlCanvas.getContext('webgl')
} else {
offScreenWebGlCtx = offScreenWebGlCanvas.getContext('webgl2')
}
if (offScreenWebGlCtx) {
try {
// Clone the 2d context back into the pages webgl context
copy2dContextToWebGLContext(offScreenCtx, offScreenWebGlCtx)
output.offScreenWebGlCtx = offScreenWebGlCtx
} catch (e) {
postDebugMessage('Failed to call readPixels on offscreen canvas', e)
}
}
}
return output
}

/**
Expand Down
16 changes: 7 additions & 9 deletions src/features/fingerprinting-canvas.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DDGProxy, DDGReflect } from '../utils'
import { DDGProxy, DDGReflect, postDebugMessage } from '../utils'
import { computeOffScreenCanvas, copy2dContextToWebGLContext } from '../canvas'
import ContentFeature from '../content-feature'

Expand Down Expand Up @@ -133,12 +133,9 @@ export default class FingerprintingCanvas extends ContentFeature {
const webGLReadMethodsProxy = new DDGProxy(featureName, context.prototype, methodName, {
apply (target, thisArg, args) {
if (thisArg) {
const { offScreenCanvas, offScreenCtx } = getCachedOffScreenCanvasOrCompute(thisArg.canvas, domainKey, sessionKey)
try {
// Clone the 2d context back into the pages webgl context
copy2dContextToWebGLContext(offScreenCtx, thisArg)
} catch (e) {
console.log('Failed to call readPixels on offscreen canvas', e, target, offScreenCanvas, offScreenCtx, args)
const { offScreenWebGlCtx } = getCachedOffScreenCanvasOrCompute(thisArg.canvas, domainKey, sessionKey, true)
if (offScreenWebGlCtx) {
return DDGReflect.apply(target, offScreenWebGlCtx, args)
}
}
return DDGReflect.apply(target, thisArg, args)
Expand Down Expand Up @@ -177,14 +174,15 @@ export default class FingerprintingCanvas extends ContentFeature {
* @param {HTMLCanvasElement | OffscreenCanvas} canvas
* @param {string} domainKey
* @param {string} sessionKey
* @returns {import('../canvas').OffscreenCanvasInfo}
*/
function getCachedOffScreenCanvasOrCompute (canvas, domainKey, sessionKey) {
function getCachedOffScreenCanvasOrCompute (canvas, domainKey, sessionKey, copy2dContextToWebGLContext) {
let result
if (canvasCache.has(canvas)) {
result = canvasCache.get(canvas)
} else {
const ctx = canvasContexts.get(canvas)
result = computeOffScreenCanvas(canvas, domainKey, sessionKey, getImageDataProxy, ctx)
result = computeOffScreenCanvas(canvas, domainKey, sessionKey, getImageDataProxy, ctx, copy2dContextToWebGLContext)
canvasCache.set(canvas, result)
}
return result
Expand Down

0 comments on commit 8d0d99e

Please sign in to comment.