How to draw custom canvas shape with Svelte?

To create a custom shape with svelte-konva, we should use Shape component.

When creating a custom shape, we need to define a drawing function that is passed a Konva.Canvas renderer.

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.