Exception when Rect has gradient

[aliahmarawan8]

When we have Rect with gradient applied following exception occures:

Exception => value.indexOf is not a function
at Context3.__applyStyleToCurrentElement (svgcanvas.js:511:91)
at Context3.fill (svgcanvas.js:868:14)
at SceneContext.fill (Context.js:250:28)
at Rect2._fillFunc (Shape.js:31:17)
at SceneContext._fillLinearGradient (Context.js:407:19)
at SceneContext._fill (Context.js:445:18)
at SceneContext.fillShape (Context.js:86:18)
at SceneContext.fillStrokeShape (Context.js:104:18)
at Rect2._sceneFunc (Rect.js:20:17)
at Rect2.drawScene (Shape.js:354:22)

File where occurred => svgcanvas.js:511

Rect Element => <Konva.Rect
x={0}
y={0}
width={600}
height={200}
fillLinearGradientStartPoint={{ x: 60, y: 20 }}
fillLinearGradientEndPoint={{ x: 200, y: 200 }}
fillLinearGradientColorStops={[
0,
"yellow",
0.5,
"blue",
0.6,
"rgba(255, 0, 0, 1)",
]}
/>

Konva version: 9.3.6
react-konva version: 18.2.10
react-konva-to-svg version: 1.0.2

[dendrofen]

@aliahmarawan8 Yes, I see a issue here. It might be related to the way konva handles gradients.

To solve this problem, you could try using ctx to draw the gradient instead of using konva's built-in gradient properties.
Here's an example based on your code:

<GradientRect width={600} height={200}/>


const GradientRect = ({ width, height }) => {
    const drawGradient = (ctx, shape) => {
        const gradient = ctx.createLinearGradient(60, 20, 200, 200);
        gradient.addColorStop(0, 'yellow');
        gradient.addColorStop(0.5, 'blue');
        gradient.addColorStop(0.6, 'rgba(255, 0, 0, 1)');

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
        ctx.fillStrokeShape(shape);
    };

    return (
        <Shape
            sceneFunc={(ctx, shape) => {
                drawGradient(ctx, shape);
            }}
        />
    );
};