TypeError: value.indexOf is not a function when using a gradient for strokeStyle

[Glitchbone]

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

[gwwar]

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/

[cfsghost]

any update for this issue?

[barberousse]

Am also getting this error with constructor call new Context({ document, width: 1920, height: 1080 })

[barberousse]

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.

[mudcube]

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.

[kasual1]

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?

[cmdcolin]

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)