From 7dbde87fabd0ed56258d14a9089028104a33aeef Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Fri, 15 Mar 2024 15:41:12 +0000
Subject: [PATCH] fix: canvas recording patches (#1082)

---
 patches/rrweb@2.0.0-alpha.11.patch | 63 +++++++++++++++++++++++++++---
 pnpm-lock.yaml                     |  6 +--
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/patches/rrweb@2.0.0-alpha.11.patch b/patches/rrweb@2.0.0-alpha.11.patch
index 4ab1e6da1..2bb5ab4fd 100644
--- a/patches/rrweb@2.0.0-alpha.11.patch
+++ b/patches/rrweb@2.0.0-alpha.11.patch
@@ -1133,19 +1133,70 @@ index 81ad4520d1435d088752a85f9a55a68ad6e0f514..e19dec6cc98ea782d53328853ca1b46d
  
  export { MutationBuffer as default };
 diff --git a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
-index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..534c6076f1cf63dfde972bb45991fc70694427b3 100644
+index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..1d9bdac62dff11370df08ee7b4a6ce75ce594eb5 100644
 --- a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
 +++ b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
-@@ -118,6 +118,12 @@ class CanvasManager {
-                         context.clear(context.COLOR_BUFFER_BIT);
-                     }
-                 }
+@@ -91,11 +91,22 @@ class CanvasManager {
+         let rafId;
+         const getCanvas = () => {
+             const matchedCanvas = [];
+-            win.document.querySelectorAll('canvas').forEach((canvas) => {
+-                if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+-                    matchedCanvas.push(canvas);
+-                }
+-            });
++
++            const searchCanvas = (root) => {
++                root.querySelectorAll('canvas').forEach((canvas) => {
++                    if (!isBlocked(canvas, blockClass, blockSelector, true)) {
++                        matchedCanvas.push(canvas);
++                    }
++                });
++                root.querySelectorAll('*').forEach((elem) => {
++                    if (elem.shadowRoot) {
++                        searchCanvas(elem.shadowRoot);
++                    }
++                });
++            };
++
++            searchCanvas(win.document);
++
+             return matchedCanvas;
+         };
+         const takeCanvasSnapshots = (timestamp) => {
+@@ -111,6 +122,12 @@ class CanvasManager {
+                 const id = this.mirror.getId(canvas);
+                 if (snapshotInProgressMap.get(id))
+                     return;
 +
 +                // The browser throws if the canvas is 0 in size
 +                // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
 +                // Assuming the same happens with height
 +                if (canvas.width === 0 || canvas.height === 0) return;
++
+                 snapshotInProgressMap.set(id, true);
+                 if (['webgl', 'webgl2'].includes(canvas.__context)) {
+                     const context = canvas.getContext(canvas.__context);
+@@ -118,12 +135,19 @@ class CanvasManager {
+                         context.clear(context.COLOR_BUFFER_BIT);
+                     }
+                 }
+-                const bitmap = yield createImageBitmap(canvas);
++
++                const width = canvas.clientWidth;
++                const height = canvas.clientHeight;
 +                
-                 const bitmap = yield createImageBitmap(canvas);
++                const bitmap = yield createImageBitmap(canvas, {
++                    resizeWidth: width,
++                    resizeHeight: height
++                })
                  worker.postMessage({
                      id,
+                     bitmap,
+-                    width: canvas.width,
+-                    height: canvas.height,
++                    width: width,
++                    height: height,
+                     dataURLOptions: options.dataURLOptions,
+                 }, [bitmap]);
+             }));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b0604df1..ac11bc352 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ settings:
 
 patchedDependencies:
   rrweb@2.0.0-alpha.11:
-    hash: tjoktulcrliiekxagfypcvjnr4
+    hash: ldhsspyvwscjgedotm5w5frkg4
     path: patches/rrweb@2.0.0-alpha.11.patch
 
 dependencies:
@@ -170,7 +170,7 @@ devDependencies:
     version: 5.12.0(rollup@4.9.6)
   rrweb:
     specifier: 2.0.0-alpha.11
-    version: 2.0.0-alpha.11(patch_hash=tjoktulcrliiekxagfypcvjnr4)
+    version: 2.0.0-alpha.11(patch_hash=ldhsspyvwscjgedotm5w5frkg4)
   rrweb-snapshot:
     specifier: 2.0.0-alpha.11
     version: 2.0.0-alpha.11
@@ -9194,7 +9194,7 @@ packages:
     resolution: {integrity: sha512-N0dzeJA2VhrlSOadkKwCVmV/DuNOwBH+Lhx89hAf9PQK4lCS8AP4AaylhqUdZOYHqwVjqsYel/uZ4hN79vuLhw==}
     dev: true
 
-  /rrweb@2.0.0-alpha.11(patch_hash=tjoktulcrliiekxagfypcvjnr4):
+  /rrweb@2.0.0-alpha.11(patch_hash=ldhsspyvwscjgedotm5w5frkg4):
     resolution: {integrity: sha512-vJ2gNvF+pUG9C2aaau7iSNqhWBSc4BwtUO4FpegOtDObuH4PIaxNJOlgHz82+WxKr9XPm93ER0LqmNpy0KYdKg==}
     dependencies:
       '@rrweb/types': 2.0.0-alpha.11