Creating a custom shape in konva.js using path2d?

Question

Using d3 for some shape calculations, then drawing with Konva.js. Creating a new shape from a svg path string. The shape is drawn, but fillStrokeShape doesn't seem to apply any styles.

The documentions says:

We can use the renderer to access the HTML5 Canvas context, and to use special methods like context.fillStrokeShape(shape) which automatically handles filling, stroking, and applying shadows.

I am guessing this is the case because the path gets drawn using stroke() or fill().

let res = 'M-258.4308858485627,28.5215223914706A260,260,0,0,1,-241.23905423140914,-96.97277305272468Q0,0,-258.4308858485627,28.5215223914706Z' 

    let shape = new Konva.Shape({
        stroke: 'blue',
        fill: 'green',
        strokeWidth: 1,
        rotation: 90,
        sceneFunc: function (ctx, shape) {   
          ctx.beginPath()

          ctx.stroke(new Path2D(res))
        
    
          ctx.fillStrokeShape(shape)
        }
      })

Possible solution would be to convert the svg path string into canvas instructions, then use context.moveTo, etc ... draw the path. But using Path2D should already do this for you.

Anyone know why fillStrokeShape is not working?

Answer 1

See docs of konvajs:

https://konvajs.org/docs/shapes/Path.html https://konvajs.org/docs/shapes/Custom.html

I think Path2D is not needed.

Insert your res in Konva.Path.data