@highlight-run/rrweb 2.0.0-lambda.3 → 2.0.0-lambda.4

package/dist/rrweb.cjs

@@ -16,6 +16,53 @@ var NodeType$3 = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["Comment"] = 5] = "Comment";
   return NodeType2;
 })(NodeType$3 || {});
+const pendingImageLoads$2 = /* @__PURE__ */ new Map();
+const wrappedContexts$2 = /* @__PURE__ */ new WeakSet();
+function isHTMLImageElement$2(img) {
+  return img !== null && typeof img === "object" && "complete" in img && "naturalWidth" in img && "naturalHeight" in img && "src" in img && "onload" in img;
+}
+function wrapCanvasContextDrawImage$2(ctx) {
+  if (wrappedContexts$2.has(ctx)) {
+    return;
+  }
+  wrappedContexts$2.add(ctx);
+  const originalDrawImage = ctx.drawImage.bind(ctx);
+  ctx.drawImage = function(image, ...args) {
+    const pending = pendingImageLoads$2.get(ctx);
+    if (pending) {
+      pending.cancelled = true;
+    }
+    const drawImageWithArgs = () => {
+      if (args.length === 2 && isHTMLImageElement$2(image)) {
+        args.push(image.naturalWidth || image.width, image.naturalHeight || image.height);
+      }
+      originalDrawImage(image, ...args);
+    };
+    if (isHTMLImageElement$2(image) && !image.complete) {
+      const loadState = { cancelled: false };
+      pendingImageLoads$2.set(ctx, loadState);
+      const onLoad = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads$2.delete(ctx);
+          drawImageWithArgs();
+        }
+      };
+      const onError = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads$2.delete(ctx);
+          try {
+            drawImageWithArgs();
+          } catch (e2) {
+          }
+        }
+      };
+      image.onload = onLoad;
+      image.onerror = onError;
+    } else {
+      drawImageWithArgs();
+    }
+  };
+}
 const testableAccessors$1 = {
   Node: ["childNodes", "parentNode", "parentElement", "textContent"],
   ShadowRoot: ["host", "styleSheets"],
@@ -183,7 +230,8 @@ const index$1 = {
   querySelector: querySelector$1,
   querySelectorAll: querySelectorAll$1,
   mutationObserver: mutationObserverCtor$1,
-  patch: patch$1
+  patch: patch$1,
+  wrapCanvasContextDrawImage: wrapCanvasContextDrawImage$2
 };
 function isElement(n2) {
   return n2.nodeType === n2.ELEMENT_NODE;
@@ -2238,7 +2286,7 @@ let Node$4$1 = class Node2 {
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 + 1];
   }
-  positionBy(opts) {
+  positionBy(opts = {}) {
     let pos = this.source.start;
     if (opts.index) {
       pos = this.positionInside(opts.index);
@@ -2267,27 +2315,38 @@ let Node$4$1 = class Node2 {
         column += 1;
       }
     }
-    return { column, line };
+    return { column, line, offset: end };
   }
   prev() {
     if (!this.parent) return void 0;
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 - 1];
   }
-  rangeBy(opts) {
+  rangeBy(opts = {}) {
+    let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
     let start = {
       column: this.source.start.column,
-      line: this.source.start.line
+      line: this.source.start.line,
+      offset: sourceOffset$1(inputString, this.source.start)
     };
     let end = this.source.end ? {
       column: this.source.end.column + 1,
-      line: this.source.end.line
+      line: this.source.end.line,
+      offset: typeof this.source.end.offset === "number" ? (
+        // `source.end.offset` is exclusive, so we don't need to add 1
+        this.source.end.offset
+      ) : (
+        // Since line/column in this.source.end is inclusive,
+        // the `sourceOffset(... , this.source.end)` returns an inclusive offset.
+        // So, we add 1 to convert it to exclusive.
+        sourceOffset$1(inputString, this.source.end) + 1
+      )
     } : {
       column: start.column + 1,
-      line: start.line
+      line: start.line,
+      offset: start.offset + 1
     };
     if (opts.word) {
-      let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
       let stringRepresentation = inputString.slice(
         sourceOffset$1(inputString, this.source.start),
         sourceOffset$1(inputString, this.source.end)
@@ -2295,15 +2354,14 @@ let Node$4$1 = class Node2 {
       let index2 = stringRepresentation.indexOf(opts.word);
       if (index2 !== -1) {
         start = this.positionInside(index2);
-        end = this.positionInside(
-          index2 + opts.word.length
-        );
+        end = this.positionInside(index2 + opts.word.length);
       }
     } else {
       if (opts.start) {
         start = {
           column: opts.start.column,
-          line: opts.start.line
+          line: opts.start.line,
+          offset: sourceOffset$1(inputString, opts.start)
         };
       } else if (opts.index) {
         start = this.positionInside(opts.index);
@@ -2311,7 +2369,8 @@ let Node$4$1 = class Node2 {
       if (opts.end) {
         end = {
           column: opts.end.column,
-          line: opts.end.line
+          line: opts.end.line,
+          offset: sourceOffset$1(inputString, opts.end)
         };
       } else if (typeof opts.endIndex === "number") {
         end = this.positionInside(opts.endIndex);
@@ -2320,7 +2379,11 @@ let Node$4$1 = class Node2 {
       }
     }
     if (end.line < start.line || end.line === start.line && end.column <= start.column) {
-      end = { column: start.column + 1, line: start.line };
+      end = {
+        column: start.column + 1,
+        line: start.line,
+        offset: start.offset + 1
+      };
     }
     return { end, start };
   }
@@ -2384,6 +2447,7 @@ let Node$4$1 = class Node2 {
       } else if (typeof value === "object" && value.toJSON) {
         fixed[name] = value.toJSON(null, inputs);
       } else if (name === "source") {
+        if (value == null) continue;
         let inputId = inputs.get(value.input);
         if (inputId == null) {
           inputId = inputsNextIndex;
@@ -2418,7 +2482,7 @@ let Node$4$1 = class Node2 {
     });
     return result2;
   }
-  warn(result2, text, opts) {
+  warn(result2, text, opts = {}) {
     let data = { node: this };
     for (let i2 in opts) data[i2] = opts[i2];
     return result2.warn(text, data);
@@ -2995,9 +3059,21 @@ let { fileURLToPath: fileURLToPath$1, pathToFileURL: pathToFileURL$1$1 } = requi
 let CssSyntaxError$1$1 = cssSyntaxError$1;
 let PreviousMap$1$1 = previousMap$1;
 let terminalHighlight$2 = require$$2$1;
-let fromOffsetCache$1 = Symbol("fromOffsetCache");
+let lineToIndexCache$1 = Symbol("lineToIndexCache");
 let sourceMapAvailable$1$1 = Boolean(SourceMapConsumer$1$1 && SourceMapGenerator$1$1);
 let pathAvailable$1$1 = Boolean(resolve$1$1 && isAbsolute$1);
+function getLineToIndex$1(input2) {
+  if (input2[lineToIndexCache$1]) return input2[lineToIndexCache$1];
+  let lines = input2.css.split("\n");
+  let lineToIndex = new Array(lines.length);
+  let prevIndex = 0;
+  for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
+    lineToIndex[i2] = prevIndex;
+    prevIndex += lines[i2].length + 1;
+  }
+  input2[lineToIndexCache$1] = lineToIndex;
+  return lineToIndex;
+}
 let Input$4$1 = class Input {
   get from() {
     return this.file || this.id;
@@ -3036,30 +3112,37 @@ let Input$4$1 = class Input {
     if (this.map) this.map.file = this.from;
   }
   error(message, line, column, opts = {}) {
-    let endColumn, endLine, result2;
+    let endColumn, endLine, endOffset, offset, result2;
     if (line && typeof line === "object") {
       let start = line;
       let end = column;
       if (typeof start.offset === "number") {
-        let pos = this.fromOffset(start.offset);
+        offset = start.offset;
+        let pos = this.fromOffset(offset);
         line = pos.line;
         column = pos.col;
       } else {
         line = start.line;
         column = start.column;
+        offset = this.fromLineAndColumn(line, column);
       }
       if (typeof end.offset === "number") {
-        let pos = this.fromOffset(end.offset);
+        endOffset = end.offset;
+        let pos = this.fromOffset(endOffset);
         endLine = pos.line;
         endColumn = pos.col;
       } else {
         endLine = end.line;
         endColumn = end.column;
+        endOffset = this.fromLineAndColumn(end.line, end.column);
       }
     } else if (!column) {
-      let pos = this.fromOffset(line);
+      offset = line;
+      let pos = this.fromOffset(offset);
       line = pos.line;
       column = pos.col;
+    } else {
+      offset = this.fromLineAndColumn(line, column);
     }
     let origin = this.origin(line, column, endLine, endColumn);
     if (origin) {
@@ -3081,7 +3164,7 @@ let Input$4$1 = class Input {
         opts.plugin
       );
     }
-    result2.input = { column, endColumn, endLine, line, source: this.css };
+    result2.input = { column, endColumn, endLine, endOffset, line, offset, source: this.css };
     if (this.file) {
       if (pathToFileURL$1$1) {
         result2.input.url = pathToFileURL$1$1(this.file).toString();
@@ -3090,21 +3173,14 @@ let Input$4$1 = class Input {
     }
     return result2;
   }
+  fromLineAndColumn(line, column) {
+    let lineToIndex = getLineToIndex$1(this);
+    let index2 = lineToIndex[line - 1];
+    return index2 + column - 1;
+  }
   fromOffset(offset) {
-    let lastLine, lineToIndex;
-    if (!this[fromOffsetCache$1]) {
-      let lines = this.css.split("\n");
-      lineToIndex = new Array(lines.length);
-      let prevIndex = 0;
-      for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
-        lineToIndex[i2] = prevIndex;
-        prevIndex += lines[i2].length + 1;
-      }
-      this[fromOffsetCache$1] = lineToIndex;
-    } else {
-      lineToIndex = this[fromOffsetCache$1];
-    }
-    lastLine = lineToIndex[lineToIndex.length - 1];
+    let lineToIndex = getLineToIndex$1(this);
+    let lastLine = lineToIndex[lineToIndex.length - 1];
     let min = 0;
     if (offset >= lastLine) {
       min = lineToIndex.length - 1;
@@ -4466,7 +4542,7 @@ let Result$3$1 = class Result {
     this.messages = [];
     this.root = root2;
     this.opts = opts;
-    this.css = void 0;
+    this.css = "";
     this.map = void 0;
   }
   toString() {
@@ -5078,7 +5154,7 @@ let NoWorkResult2$1 = noWorkResult$1;
 let Root$1$1 = root$1;
 let Processor$1$1 = class Processor {
   constructor(plugins = []) {
-    this.version = "8.5.3";
+    this.version = "8.5.6";
     this.plugins = this.normalize(plugins);
   }
   normalize(plugins) {
@@ -5446,13 +5522,12 @@ function buildNode(n2, options) {
         const value = specialAttributes[name];
         if (tagName === "canvas" && name === "rr_dataURL") {
           const image = doc.createElement("img");
-          image.onload = () => {
-            const ctx = node2.getContext("2d");
-            if (ctx) {
-              ctx.drawImage(image, 0, 0, image.width, image.height);
-            }
-          };
           image.src = value.toString();
+          const ctx = node2.getContext("2d");
+          if (ctx) {
+            wrapCanvasContextDrawImage$2(ctx);
+            ctx.drawImage(image, 0, 0);
+          }
           if (node2.RRNodeType)
             node2.rr_dataURL = value.toString();
         } else if (tagName === "img" && name === "rr_dataURL") {
@@ -6321,7 +6396,7 @@ let Node$4 = class Node3 {
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 + 1];
   }
-  positionBy(opts) {
+  positionBy(opts = {}) {
     let pos = this.source.start;
     if (opts.index) {
       pos = this.positionInside(opts.index);
@@ -6350,27 +6425,38 @@ let Node$4 = class Node3 {
         column += 1;
       }
     }
-    return { column, line };
+    return { column, line, offset: end };
   }
   prev() {
     if (!this.parent) return void 0;
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 - 1];
   }
-  rangeBy(opts) {
+  rangeBy(opts = {}) {
+    let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
     let start = {
       column: this.source.start.column,
-      line: this.source.start.line
+      line: this.source.start.line,
+      offset: sourceOffset(inputString, this.source.start)
     };
     let end = this.source.end ? {
       column: this.source.end.column + 1,
-      line: this.source.end.line
+      line: this.source.end.line,
+      offset: typeof this.source.end.offset === "number" ? (
+        // `source.end.offset` is exclusive, so we don't need to add 1
+        this.source.end.offset
+      ) : (
+        // Since line/column in this.source.end is inclusive,
+        // the `sourceOffset(... , this.source.end)` returns an inclusive offset.
+        // So, we add 1 to convert it to exclusive.
+        sourceOffset(inputString, this.source.end) + 1
+      )
     } : {
       column: start.column + 1,
-      line: start.line
+      line: start.line,
+      offset: start.offset + 1
     };
     if (opts.word) {
-      let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
       let stringRepresentation = inputString.slice(
         sourceOffset(inputString, this.source.start),
         sourceOffset(inputString, this.source.end)
@@ -6378,15 +6464,14 @@ let Node$4 = class Node3 {
       let index2 = stringRepresentation.indexOf(opts.word);
       if (index2 !== -1) {
         start = this.positionInside(index2);
-        end = this.positionInside(
-          index2 + opts.word.length
-        );
+        end = this.positionInside(index2 + opts.word.length);
       }
     } else {
       if (opts.start) {
         start = {
           column: opts.start.column,
-          line: opts.start.line
+          line: opts.start.line,
+          offset: sourceOffset(inputString, opts.start)
         };
       } else if (opts.index) {
         start = this.positionInside(opts.index);
@@ -6394,7 +6479,8 @@ let Node$4 = class Node3 {
       if (opts.end) {
         end = {
           column: opts.end.column,
-          line: opts.end.line
+          line: opts.end.line,
+          offset: sourceOffset(inputString, opts.end)
         };
       } else if (typeof opts.endIndex === "number") {
         end = this.positionInside(opts.endIndex);
@@ -6403,7 +6489,11 @@ let Node$4 = class Node3 {
       }
     }
     if (end.line < start.line || end.line === start.line && end.column <= start.column) {
-      end = { column: start.column + 1, line: start.line };
+      end = {
+        column: start.column + 1,
+        line: start.line,
+        offset: start.offset + 1
+      };
     }
     return { end, start };
   }
@@ -6467,6 +6557,7 @@ let Node$4 = class Node3 {
       } else if (typeof value === "object" && value.toJSON) {
         fixed[name] = value.toJSON(null, inputs);
       } else if (name === "source") {
+        if (value == null) continue;
         let inputId = inputs.get(value.input);
         if (inputId == null) {
           inputId = inputsNextIndex;
@@ -6501,7 +6592,7 @@ let Node$4 = class Node3 {
     });
     return result2;
   }
-  warn(result2, text, opts) {
+  warn(result2, text, opts = {}) {
     let data = { node: this };
     for (let i2 in opts) data[i2] = opts[i2];
     return result2.warn(text, data);
@@ -7078,9 +7169,21 @@ let { fileURLToPath, pathToFileURL: pathToFileURL$1 } = require$$2;
 let CssSyntaxError$1 = cssSyntaxError;
 let PreviousMap$1 = previousMap;
 let terminalHighlight = require$$2;
-let fromOffsetCache = Symbol("fromOffsetCache");
+let lineToIndexCache = Symbol("lineToIndexCache");
 let sourceMapAvailable$1 = Boolean(SourceMapConsumer$1 && SourceMapGenerator$1);
 let pathAvailable$1 = Boolean(resolve$1 && isAbsolute);
+function getLineToIndex(input2) {
+  if (input2[lineToIndexCache]) return input2[lineToIndexCache];
+  let lines = input2.css.split("\n");
+  let lineToIndex = new Array(lines.length);
+  let prevIndex = 0;
+  for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
+    lineToIndex[i2] = prevIndex;
+    prevIndex += lines[i2].length + 1;
+  }
+  input2[lineToIndexCache] = lineToIndex;
+  return lineToIndex;
+}
 let Input$4 = class Input2 {
   get from() {
     return this.file || this.id;
@@ -7119,30 +7222,37 @@ let Input$4 = class Input2 {
     if (this.map) this.map.file = this.from;
   }
   error(message, line, column, opts = {}) {
-    let endColumn, endLine, result2;
+    let endColumn, endLine, endOffset, offset, result2;
     if (line && typeof line === "object") {
       let start = line;
       let end = column;
       if (typeof start.offset === "number") {
-        let pos = this.fromOffset(start.offset);
+        offset = start.offset;
+        let pos = this.fromOffset(offset);
         line = pos.line;
         column = pos.col;
       } else {
         line = start.line;
         column = start.column;
+        offset = this.fromLineAndColumn(line, column);
       }
       if (typeof end.offset === "number") {
-        let pos = this.fromOffset(end.offset);
+        endOffset = end.offset;
+        let pos = this.fromOffset(endOffset);
         endLine = pos.line;
         endColumn = pos.col;
       } else {
         endLine = end.line;
         endColumn = end.column;
+        endOffset = this.fromLineAndColumn(end.line, end.column);
       }
     } else if (!column) {
-      let pos = this.fromOffset(line);
+      offset = line;
+      let pos = this.fromOffset(offset);
       line = pos.line;
       column = pos.col;
+    } else {
+      offset = this.fromLineAndColumn(line, column);
     }
     let origin = this.origin(line, column, endLine, endColumn);
     if (origin) {
@@ -7164,7 +7274,7 @@ let Input$4 = class Input2 {
         opts.plugin
       );
     }
-    result2.input = { column, endColumn, endLine, line, source: this.css };
+    result2.input = { column, endColumn, endLine, endOffset, line, offset, source: this.css };
     if (this.file) {
       if (pathToFileURL$1) {
         result2.input.url = pathToFileURL$1(this.file).toString();
@@ -7173,21 +7283,14 @@ let Input$4 = class Input2 {
     }
     return result2;
   }
+  fromLineAndColumn(line, column) {
+    let lineToIndex = getLineToIndex(this);
+    let index2 = lineToIndex[line - 1];
+    return index2 + column - 1;
+  }
   fromOffset(offset) {
-    let lastLine, lineToIndex;
-    if (!this[fromOffsetCache]) {
-      let lines = this.css.split("\n");
-      lineToIndex = new Array(lines.length);
-      let prevIndex = 0;
-      for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
-        lineToIndex[i2] = prevIndex;
-        prevIndex += lines[i2].length + 1;
-      }
-      this[fromOffsetCache] = lineToIndex;
-    } else {
-      lineToIndex = this[fromOffsetCache];
-    }
-    lastLine = lineToIndex[lineToIndex.length - 1];
+    let lineToIndex = getLineToIndex(this);
+    let lastLine = lineToIndex[lineToIndex.length - 1];
     let min = 0;
     if (offset >= lastLine) {
       min = lineToIndex.length - 1;
@@ -8549,7 +8652,7 @@ let Result$3 = class Result2 {
     this.messages = [];
     this.root = root2;
     this.opts = opts;
-    this.css = void 0;
+    this.css = "";
     this.map = void 0;
   }
   toString() {
@@ -9161,7 +9264,7 @@ let NoWorkResult22 = noWorkResult;
 let Root$1 = root;
 let Processor$1 = class Processor2 {
   constructor(plugins = []) {
-    this.version = "8.5.3";
+    this.version = "8.5.6";
     this.plugins = this.normalize(plugins);
   }
   normalize(plugins) {
@@ -9845,6 +9948,53 @@ var NodeType$2 = /* @__PURE__ */ ((NodeType2) => {
   NodeType2[NodeType2["DOCUMENT_FRAGMENT_NODE"] = 11] = "DOCUMENT_FRAGMENT_NODE";
   return NodeType2;
 })(NodeType$2 || {});
+const pendingImageLoads$1 = /* @__PURE__ */ new Map();
+const wrappedContexts$1 = /* @__PURE__ */ new WeakSet();
+function isHTMLImageElement$1(img) {
+  return img !== null && typeof img === "object" && "complete" in img && "naturalWidth" in img && "naturalHeight" in img && "src" in img && "onload" in img;
+}
+function wrapCanvasContextDrawImage$1(ctx) {
+  if (wrappedContexts$1.has(ctx)) {
+    return;
+  }
+  wrappedContexts$1.add(ctx);
+  const originalDrawImage = ctx.drawImage.bind(ctx);
+  ctx.drawImage = function(image, ...args) {
+    const pending = pendingImageLoads$1.get(ctx);
+    if (pending) {
+      pending.cancelled = true;
+    }
+    const drawImageWithArgs = () => {
+      if (args.length === 2 && isHTMLImageElement$1(image)) {
+        args.push(image.naturalWidth || image.width, image.naturalHeight || image.height);
+      }
+      originalDrawImage(image, ...args);
+    };
+    if (isHTMLImageElement$1(image) && !image.complete) {
+      const loadState = { cancelled: false };
+      pendingImageLoads$1.set(ctx, loadState);
+      const onLoad = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads$1.delete(ctx);
+          drawImageWithArgs();
+        }
+      };
+      const onError = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads$1.delete(ctx);
+          try {
+            drawImageWithArgs();
+          } catch (e2) {
+          }
+        }
+      };
+      image.onload = onLoad;
+      image.onerror = onError;
+    } else {
+      drawImageWithArgs();
+    }
+  };
+}
 const NAMESPACES = {
   svg: "http://www.w3.org/2000/svg",
   "xlink:href": "http://www.w3.org/1999/xlink",
@@ -9998,13 +10148,12 @@ function diffAfterUpdatingChildren(oldTree, newTree, replayer) {
           const rrCanvasElement = newTree;
           if (rrCanvasElement.rr_dataURL !== null) {
             const image = document.createElement("img");
-            image.onload = () => {
-              const ctx = oldElement.getContext("2d");
-              if (ctx) {
-                ctx.drawImage(image, 0, 0, image.width, image.height);
-              }
-            };
             image.src = rrCanvasElement.rr_dataURL;
+            const ctx = oldElement.getContext("2d");
+            if (ctx) {
+              wrapCanvasContextDrawImage$1(ctx);
+              ctx.drawImage(image, 0, 0);
+            }
           }
           rrCanvasElement.canvasMutations.forEach(
             (canvasMutation2) => replayer.applyCanvas(
@@ -10069,12 +10218,11 @@ function diffProps(oldTree, newTree, rrnodeMirror) {
     else if (newTree.tagName === "CANVAS" && name === "rr_dataURL") {
       const image = document.createElement("img");
       image.src = newValue;
-      image.onload = () => {
-        const ctx = oldTree.getContext("2d");
-        if (ctx) {
-          ctx.drawImage(image, 0, 0, image.width, image.height);
-        }
-      };
+      const ctx = oldTree.getContext("2d");
+      if (ctx) {
+        wrapCanvasContextDrawImage$1(ctx);
+        ctx.drawImage(image, 0, 0);
+      }
     } else if (newTree.tagName === "IFRAME" && name === "srcdoc") continue;
     else {
       try {
@@ -10585,6 +10733,53 @@ function getDefaultSN(node2, id) {
       };
   }
 }
+const pendingImageLoads = /* @__PURE__ */ new Map();
+const wrappedContexts = /* @__PURE__ */ new WeakSet();
+function isHTMLImageElement(img) {
+  return img !== null && typeof img === "object" && "complete" in img && "naturalWidth" in img && "naturalHeight" in img && "src" in img && "onload" in img;
+}
+function wrapCanvasContextDrawImage(ctx) {
+  if (wrappedContexts.has(ctx)) {
+    return;
+  }
+  wrappedContexts.add(ctx);
+  const originalDrawImage = ctx.drawImage.bind(ctx);
+  ctx.drawImage = function(image, ...args) {
+    const pending = pendingImageLoads.get(ctx);
+    if (pending) {
+      pending.cancelled = true;
+    }
+    const drawImageWithArgs = () => {
+      if (args.length === 2 && isHTMLImageElement(image)) {
+        args.push(image.naturalWidth || image.width, image.naturalHeight || image.height);
+      }
+      originalDrawImage(image, ...args);
+    };
+    if (isHTMLImageElement(image) && !image.complete) {
+      const loadState = { cancelled: false };
+      pendingImageLoads.set(ctx, loadState);
+      const onLoad = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads.delete(ctx);
+          drawImageWithArgs();
+        }
+      };
+      const onError = () => {
+        if (!loadState.cancelled) {
+          pendingImageLoads.delete(ctx);
+          try {
+            drawImageWithArgs();
+          } catch (e2) {
+          }
+        }
+      };
+      image.onload = onLoad;
+      image.onerror = onError;
+    } else {
+      drawImageWithArgs();
+    }
+  };
+}
 const testableAccessors = {
   Node: ["childNodes", "parentNode", "parentElement", "textContent"],
   ShadowRoot: ["host", "styleSheets"],
@@ -10752,7 +10947,8 @@ const index = {
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
-  patch
+  patch,
+  wrapCanvasContextDrawImage
 };
 function on(type, fn, target = document) {
   const options = { capture: true };
@@ -15634,6 +15830,7 @@ async function canvasMutation$1({
     errorHandler2(mutations[0], new Error("Canvas context is null"));
     return;
   }
+  wrapCanvasContextDrawImage(ctx);
   const mutationArgsPromises = mutations.map(
     async (mutation) => {
       return Promise.all(mutation.args.map(deserializeArg(imageMap, ctx)));