fix: canvas recording patches (#1082)

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]);
+             }));