Svg for the puzzle pieces

[Kanchana-Sara]

Hi im trying to implement puzzle board so I want to access the svg path of the puzzle piece. How can I access it?

[flbulgarelli]

👋 Hi!

Please have a look at #76 - headbreaker does not offer explicit support for drawing pieces using svg, but using its custom outline interface.

However, if you want to add additional SVG components to the canvas, you could use Konva primitives: https://konvajs.org/docs/sandbox/SVG_On_Canvas.html.

Before doing that, you'll need to access the Konva's layer object provided with the default canvas: Canvas#__konvaLayer__.

const canvas = new headbreaker.Canvas('my-canvas', {
  width: 800, height: 800
});
canvas.autogenerate();
canvas.shuffle(0.7);
canvas.__konvaLayer__ // here you can start talking directly with Konva
canvas.draw();

Hope that helps!