TypeError: Failed to execute 'addColorStop' on 'CanvasGradient'

[super-stein]

Bug

We are using the component https://paramquery.com/pro/grid in our application it cause a exception when I try to create a canvas.

Uncaught (in promise) TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided double value is non-finite.
    at canvas-renderer.ts:576
    at Array.forEach (<anonymous>)
    at canvas-renderer.ts:575
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at step (tslib.es6.js:82)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:67)

Reproduce Bug

• Open https://paramquery.com/pro/grid
• Open Console
• Enter following code (line by line)

  
  //Add html2canvas functionality
  var head= document.getElementsByTagName('head')[0];var script= document.createElement('script');script.type= 'text/javascript';script.src= 'https://html2canvas.hertzen.com/dist/html2canvas.js';head.appendChild(script);

//create canvas html2canvas(document.querySelector('body')).then(canvas => {console.log('works')});

### Specifications:

 * Browser & version: Chrome (latest) && Firefox (latest)
 * Operating system: Windows

[webauthor]

Having the same issue with PQGrid.

[bellsml]

Having the same issue.

[rndm2]

Having same issue

[hyl1374961656]

Having same issue

[lzhec]

Having same issue

[matosovaolga]

did anyone find solution?

[Nodirbek-Sharipov]

I was having this error, in a different application of canvas and JS, I found out that value which is getting passed to addColorStop method was NaN at some point. So I checked and reset the value to 0 if it was NaN

let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

if(!percent){
    percent = 0
}

let my_gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
my_gradient.addColorStop(percent/100, "rgba(0,0,0,0.1)");
my_gradient.addColorStop(percent/100, EventVars.canvas_bg);
ctx.fillStyle = my_gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

[lxdora]

same issue

[alexrafuse]

Having the same issue, any solution?

[Dror-Bar]

In my case, it had to do with the fact the Canvas was really small, for example, it had width and height of 1 pixel, and also had border of 1. This messed up some of the logic in html2canvas - I think it gets a lineLength of 0 which results in NaN value which leads to this error.

In order to fix this, go to html2canvas.js file in your node modules, search for "createLinearGradient". A line under it, change this:

processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {

To this:

processColorStops(backgroundImage.stops, lineLength || 1).forEach(function (colorStop) {

Make sure to save the changes with patch-package so it persists after npm install.

[Ovilia]

@Dror-Bar I agree with you. Would you make a PR about it?

[Sharcoux]

While waiting for this project to integrate the awaiting PRs, we released our fork that integrates this solution. You can use it with npm i @cantoo/html2canvas.

[hammadahamed]

While waiting for this project to integrate the awaiting PRs, we released our fork that integrates this solution. You can use it with npm i @cantoo/html2canvas.

This is working for me 🙌., Can i go production with this ?