DOMException: CanvasRenderingContext2D.createPattern: Passed-in canvas has height 0

[noahking27]

Bug reports:

I am trying to download an image of my DOM and it works on Chrome and Safari fine, but Firefox throws the following error.

This is how I'm using html2canvas const canvas = await html2canvas(document.getElementById(cyId)); const uri = canvas.toDataURL();

package.json version is "html2canvas": "^1.4.0"

There is a closed issue regarding this https://github.com/niklasvh/html2canvas/issues/2268

Specifications:

• html2canvas version tested with: 1.4.0
• Browser & version: Firefox version 96
• Operating system: macOS Monterey

[niklasvh]

Can you share a repro on jsfiddle.net?

[kekehaoz]

I also have the issue. some thing is wrong with linear-gradient when width or height less than 1px. https://jsfiddle.net/qy470jcp/6/

[pana1990]

@noahking27 @kekehaoz hi, please, can you check my pull request?.

Thanks in advanced.

[Usbac]

I have the same issue (Firefox 107.0.1 in macOS Ventura). I tried @pana1990 solution locally, but it didn't fix the issue, at least in my case.

[pana1990]

@Usbac can you give me the steps to reproduce your error?

[mihakot]

The problem is still reproducible. firefox 110.0 html2canvas 1.4.1

                let element = document.body;
                html2canvas(element, {
                    ignoreElements: function (element) {
                        /* Remove element with id="MyElementIdHere" */
                        if ('footer' === element.id) {
                            return true;
                        }
                    }
                }).then(function (canvas) {
                    vm.screenshot = canvas.toDataURL();
                });

#1 0ms Starting document clone with size 1920x955 scrolled to 0,0 html2canvas.js:7630:34
#1 149ms Document cloned, element located at 0,0 with size 1920x955 using computed rendering html2canvas.js:7630:34
#1 149ms Starting DOM parsing html2canvas.js:7630:34
#1 159ms Added image https://**/img/bg.png html2canvas.js:7630:34
#1 184ms Added image https://**/img/logo.png html2canvas.js:7630:34
#1 197ms Added image https://**/storage/avatar/8f14e45fceea167a5a36dedd4bea2543.jpg html2canvas.js:7630:34
#1 197ms Added image https://**/img/line.svg html2canvas.js:7630:34
#1 200ms Added image data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E html2canvas.js:7630:34
#1 248ms Starting renderer for element at 0,0 with size 1920x955 html2canvas.js:7630:34
#1 249ms Canvas renderer initialized (1920x955) with scale 1 html2canvas.js:7630:34
Uncaught (in promise) DOMException: CanvasRenderingContext2D.createPattern: Passed-in canvas has height 0 app.js:2

[NathanKleekamp]

From the error output, it looks like you're referencing an SVG image. There's a long standing bug in Firefox with the drawImage method that might be causing this. Basically, you need to make sure you have width and height attributes defined on the svg element. For example:

<svg viewBox="0 0 1044 402" width="1044" height="402" xmlns="http://www.w3.org/2000/svg">...</svg>

In my application, I'm using an SVG as a background image, and the lack of width / height triggered the DOMException: CanvasRenderingContext2D.createPattern: Passed-in canvas has width 0

[Nogatz]

Any updates about this task, I still having this problem in Firefox: 115.0.1

[musana]

Hello, we are waiting for relevant update. we still suffered from the issue. Thanks.