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

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

[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?