canvas2svg
canvas2svg copied to clipboard
TypeError: value.indexOf is not a function when using a gradient for strokeStyle
Hi,
I have an error when I want to use a gradient for a line strokeStyle: "TypeError: value.indexOf is not a function" I tried to use a gradient for fillStyle and it works perfectly. I made a JSFiddle: http://jsfiddle.net/5bbn59rs/4/
Thanks in advance
Looks like width and height was not defined when you created a new C2S. If you open up dev tools on jsFiddle they'll show you the js errors. http://jsfiddle.net/5bbn59rs/5/
any update for this issue?
Am also getting this error with constructor call new Context({ document, width: 1920, height: 1080 })
So, in my case the problem is with Line 383:
if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf && value.indexOf("rgba") !== -1)
It appears that the logic doesn't expect to have to handle a CanvasGradient
object as a value of fill
, which is rather standard. This line should check that it's not dealing with a string first by testing for indexOf
existence first.
It's expecting a C2S CanvasGradient
not a HTMLCanvasElement CanvasGradient
. If you create your gradient using ctx.createLinearGradient
or ctx.createRadialGradient
method on the C2S instance you should not run into the issue.
I ran into the same problem as @barberousse Adding the following code to the already existing else-if clauses seems to fix this issue:
// other if statements...
// Add this before the last else-if clause
else if(style.apply.indexOf("stroke") !==-1 && value instanceof CanvasGradient) {
this.__currentElement.setAttribute("stroke", format("url(#{id})", {id:value.__root.getAttribute("id")}));
}
// Last else-if clause
else if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1){
// ...
}
Can someone confirm, that I'm on the right track?
unrelated to original issue perhaps, but I ran into this same error message when I was passing an object to the fillStyle (object was a Color object from https://www.npmjs.com/package/color)
the HTML5 canvas API presumably stringifies this Color object automatically, but it caused a crash in canvas2svg (solution: just stringify manually before setting ctx.fillStyle)