niklasvh
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
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);
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.
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.
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 ?
Is the fix going to be rolled out into production? We need this fix or look for an alternative.
Well, we use our fork in production, and this project is dead so it won't release anything anymore, but people seem to be using snapdom nowadays, so just pick the solution that seems best for your case.