Add canvas change detetion

Author: BeltranBulbarellaDD

packages/browser-rum/src/domain/record/canvas/canvasManager.spec.ts

@@ -0,0 +1,27 @@
+import { createCanvasManager } from './canvasManager'
+
+describe('createCanvasManager', () => {
+  it('tracks whether a canvas is dirty', () => {
+    const canvasManager = createCanvasManager()
+    const canvas = document.createElement('canvas')
+
+    expect(canvasManager.isCanvasDirty(canvas)).toBeFalse()
+
+    canvasManager.markCanvasDirty(canvas)
+    expect(canvasManager.isCanvasDirty(canvas)).toBeTrue()
+
+    canvasManager.markCanvasClean(canvas)
+    expect(canvasManager.isCanvasDirty(canvas)).toBeFalse()
+  })
+
+  it('tracks canvases independently', () => {
+    const canvasManager = createCanvasManager()
+    const dirtyCanvas = document.createElement('canvas')
+    const cleanCanvas = document.createElement('canvas')
+
+    canvasManager.markCanvasDirty(dirtyCanvas)
+
+    expect(canvasManager.isCanvasDirty(dirtyCanvas)).toBeTrue()
+    expect(canvasManager.isCanvasDirty(cleanCanvas)).toBeFalse()
+  })
+})

packages/browser-rum/src/domain/record/canvas/canvasManager.ts

@@ -0,0 +1,15 @@
+export interface CanvasManager {
+  isCanvasDirty: (canvas: HTMLCanvasElement) => boolean
+  markCanvasClean: (canvas: HTMLCanvasElement) => void
+  markCanvasDirty: (canvas: HTMLCanvasElement) => void
+}
+
+export function createCanvasManager(): CanvasManager {
+  const dirtyCanvases = new WeakSet<HTMLCanvasElement>()
+
+  return {
+    isCanvasDirty: (canvas) => dirtyCanvases.has(canvas),
+    markCanvasClean: (canvas) => dirtyCanvases.delete(canvas),
+    markCanvasDirty: (canvas) => dirtyCanvases.add(canvas),
+  }
+}

packages/browser-rum/src/domain/record/trackers/trackCanvas.spec.ts

@@ -0,0 +1,85 @@
+import { mockClock, registerCleanupTask } from '@datadog/browser-core/test'
+import type { Clock } from '@datadog/browser-core/test'
+import type { Tracker } from './tracker.types'
+import { trackCanvas2DMutations } from './trackCanvas'
+
+describe('trackCanvas2DMutations', () => {
+  let canvas: HTMLCanvasElement
+  let context: CanvasRenderingContext2D
+  let markCanvasDirtySpy: jasmine.Spy<(canvas: HTMLCanvasElement) => void>
+  let tracker: Tracker | undefined
+
+  beforeEach(() => {
+    canvas = document.createElement('canvas')
+    context = canvas.getContext('2d')!
+    markCanvasDirtySpy = jasmine.createSpy()
+
+    registerCleanupTask(() => tracker?.stop())
+  })
+
+  it('marks the canvas dirty after drawing operations', () => {
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+    const imageData = context.createImageData(1, 1)
+    const drawingOperations = [
+      () => context.clearRect(0, 0, 1, 1),
+      () => context.fillRect(0, 0, 1, 1),
+      () => context.strokeRect(0, 0, 1, 1),
+      () => context.fill(),
+      () => context.stroke(),
+      () => context.fillText('foo', 0, 0),
+      () => context.strokeText('foo', 0, 0),
+      () => context.drawImage(canvas, 0, 0),
+      () => context.putImageData(imageData, 0, 0),
+      () => context.drawFocusIfNeeded(canvas),
+      () => context.reset(),
+    ]
+
+    drawingOperations.forEach((draw) => {
+      markCanvasDirtySpy.calls.reset()
+      draw()
+      expect(markCanvasDirtySpy).toHaveBeenCalledOnceWith(canvas)
+    })
+  })
+
+  it('does not mark the canvas dirty for non-drawing operations', () => {
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+
+    context.beginPath()
+    context.moveTo(0, 0)
+    context.lineTo(1, 1)
+
+    expect(markCanvasDirtySpy).not.toHaveBeenCalled()
+  })
+
+  it('does not mark the canvas dirty when a drawing operation throws', () => {
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+
+    expect(() => context.putImageData(null as unknown as ImageData, 0, 0)).toThrow()
+    expect(markCanvasDirtySpy).not.toHaveBeenCalled()
+  })
+
+  it('marks the canvas dirty when it is resized', () => {
+    const clock: Clock = mockClock()
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+
+    canvas.width = 100
+    canvas.height = 50
+    clock.tick(0)
+
+    expect(markCanvasDirtySpy).toHaveBeenCalledTimes(2)
+    expect(markCanvasDirtySpy.calls.argsFor(0)[0]).toBe(canvas)
+    expect(markCanvasDirtySpy.calls.argsFor(1)[0]).toBe(canvas)
+  })
+
+  it('stops tracking drawing operations', () => {
+    const clock: Clock = mockClock()
+    tracker = trackCanvas2DMutations(markCanvasDirtySpy)
+    tracker.stop()
+
+    context.fillRect(0, 0, 1, 1)
+    canvas.width = 100
+    clock.tick(0)
+
+    expect(markCanvasDirtySpy).not.toHaveBeenCalled()
+  })
+})

packages/browser-rum/src/domain/record/trackers/trackCanvas.ts

@@ -0,0 +1,56 @@
+import { instrumentMethod, instrumentSetter } from '@datadog/browser-core'
+import type { Tracker } from './tracker.types'
+
+export type MarkCanvasDirty = (canvas: HTMLCanvasElement) => void
+
+type Canvas2DDrawingMethod =
+  | 'clearRect'
+  | 'fillRect'
+  | 'strokeRect'
+  | 'fill'
+  | 'stroke'
+  | 'fillText'
+  | 'strokeText'
+  | 'drawImage'
+  | 'putImageData'
+  | 'drawFocusIfNeeded'
+  | 'reset'
+
+const CANVAS_2D_DRAWING_METHODS: readonly Canvas2DDrawingMethod[] = [
+  'clearRect',
+  'fillRect',
+  'strokeRect',
+  'fill',
+  'stroke',
+  'fillText',
+  'strokeText',
+  'drawImage',
+  'putImageData',
+  'drawFocusIfNeeded',
+  'reset',
+]
+
+export function trackCanvas2DMutations(markCanvasDirty: MarkCanvasDirty): Tracker {
+  const instrumentationStoppers: Tracker[] = []
+
+  if (typeof CanvasRenderingContext2D !== 'undefined') {
+    CANVAS_2D_DRAWING_METHODS.forEach((method) => {
+      instrumentationStoppers.push(
+        instrumentMethod(CanvasRenderingContext2D.prototype, method, ({ target: context, onPostCall }) => {
+          onPostCall(() => markCanvasDirty(context.canvas))
+        })
+      )
+    })
+  }
+
+  if (typeof HTMLCanvasElement !== 'undefined') {
+    instrumentationStoppers.push(
+      instrumentSetter(HTMLCanvasElement.prototype, 'width', markCanvasDirty),
+      instrumentSetter(HTMLCanvasElement.prototype, 'height', markCanvasDirty)
+    )
+  }
+
+  return {
+    stop: () => instrumentationStoppers.forEach((stopper) => stopper.stop()),
+  }
+}