Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

Specifications:

• html2canvas version tested with: 1.0.0-rc.2
• Browser & version: chromium latest release
• Operating system: fedora 29

[klues]

I got the similar error InvalidStateError: CanvasRenderingContext2D.createPattern: Passed-in canvas has width 0 which only occurs in Firefox. After some investigation I found out it occurs on svg-images set as background-image.

See this jsfiddle for demo.

Including the lines

ignoreElements: (node) => {
    return node.style['background-image'].indexOf('image/svg') !== -1;
}

is a quickfix.

[shaji-Dev]

@rdpatel3996 Yes, I just needed to add the ignoreElements configuration and all is well, appearently the new version of Google Maps use iframe elements inside which makes it impossible to capture.

const mapWrapper = document.getElementById('mapWrapper');
      html2canvas(mapWrapper, {
        useCORS: true,
        allowTaint: false,
        logging: isDevMode(),
        ignoreElements: (node) => {
          return node.nodeName === 'IFRAME';
        }
      }).then(canvas => {
        canvas.toBlob(blob => {
          resolve(blob);
        });
      }).catch(reject);

The key is to add this config:

ignoreElements: (node) => {
          return node.nodeName === 'IFRAME';
        }