fix: canvas data in iframe wasn't applied in the fast-forward mode (#944)

* fix: canvas data in iframe wasn't applied in the fastforward mode

* add more comments

* Update packages/rrdom/src/diff.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* apply Juice10's suggestion

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

packages/rrdom/src/diff.ts

@@ -136,14 +136,27 @@ export function diff(
           break;
         }
         case 'CANVAS':
-          (newTree as RRCanvasElement).canvasMutations.forEach(
-            (canvasMutation) =>
+          {
+            const rrCanvasElement = newTree as RRCanvasElement;
+            // This canvas element is created with initial data in an iframe element. https://github.com/rrweb-io/rrweb/pull/944
+            if (rrCanvasElement.rr_dataURL !== null) {
+              const image = document.createElement('img');
+              image.onload = () => {
+                const ctx = (oldElement as HTMLCanvasElement).getContext('2d');
+                if (ctx) {
+                  ctx.drawImage(image, 0, 0, image.width, image.height);
+                }
+              };
+              image.src = rrCanvasElement.rr_dataURL;
+            }
+            rrCanvasElement.canvasMutations.forEach((canvasMutation) =>
               replayer.applyCanvas(
                 canvasMutation.event,
                 canvasMutation.mutation,
                 oldTree as HTMLCanvasElement,
               ),
-          );
+            );
+          }
           break;
         case 'STYLE':
           applyVirtualStyleRulesToNode(