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

Issue Analytics

State:
Created 4 years ago
Reactions:17
Comments:11

Top GitHub Comments

9reactions

Dror-Barcommented, Jun 13, 2021

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.

0reactions

Oviliacommented, Jun 22, 2021

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

Top Results From Across the Web

canvas color gradient animation error :Failed to execute ...

The error is occurring because, you are not passing the parameters (x, y, r) when calling the drawCircle function through ...

CanvasGradient.addColorStop() - Web APIs | MDN

The CanvasGradient.addColorStop() method adds a new color stop, defined by an offset and a color, to a given canvas gradient.

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.

third_party/WebKit/LayoutTests/fast/canvas/gradient-addColorStop ...

PASS gradient.addColorStop(Infinity, '#000') threw exception TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided float value is non- ...

addColorStop · WebPlatform Docs

Method of apis/canvas/CanvasGradientapis/canvas/CanvasGradient ... 0.0 and 1.0 that represents the position between the start and end points in a gradient.