html2canvas: 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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22 (2 by maintainers)

Commits related to this issue

ignore svg images in taking a screenshot in Firefox -> throws error, see https://github.com/niklasvh/html2canvas/issues/1859#issuecomment-637496188 — committed to asterics/AsTeRICS-Grid by klues 4 years ago
fix(canvas-renderer): verify image width and height fix #1859 — committed to FEliuyg/html2canvas by FEliuyg 3 years ago

Most upvoted comments

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.

klues on Jun 2, 2020

@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';
        }

shaji-Dev on Sep 20, 2019

Hi, i’m having the same error on “1.0.0-rc.3” when html have css: “background: linear-gradient()”

falget on Jul 10, 2019

Hi, I’m having the same error. I have checked the previous version and it works fine on “1.0.0-rc.1” for all version above I’m getting the error.

danielloynaz on Jun 4, 2019

I’m having the same issue with an iframe, and this PR fixed it for me:

https://github.com/niklasvh/html2canvas/pull/1863/files

josephmisiti on May 31, 2019

I have this same issue. My scenario is an iframe without a height and width attribute it would throw this error. Height and width set in a style tag was ignored.

Specifications: html2canvas version tested with: 1.0.0-rc.3 Browser & version: chromium latest release Operating system: Windows 10

code-viper on May 30, 2019

Fixed with https://github.com/niklasvh/html2canvas/pull/2409

niklasvh on Jul 4, 2021

I’m having the same error on “1.0.0-rc.3”

if use previous version of “1.0.0-rc.1”, it is fine

luyu1314 on Jul 7, 2019