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);
            }}
        />
    );
};