How to make a puzzle in js?

Question

JavaScript

Hello, you need to implement something similar, as in the picture, in js, that is, you need to cut the selected letter into n number of parts, preferably along random lines, then leave its outline and assemble it with drag-n-drop . Can you please tell me how to implement or where to at least dig, I will be extremely grateful)

Answer 1

Krch roughly made, breaks into square parts and the collision is also in squares, and not along the contour. The number of split parts can be variable set. But without any libraries

Answer 2

First you need to decide whether to do it as a raster or vector graphics.
In the future, it's better to do it as a raster (that is, on canvas), and here it's better to choose a library with which you will render it all.
For example, let's choose Pixi.js
Create a canvas, and add a sprite with the letter N-th number of times to it, and for each copy of this sprite we apply a mask . The mask must first be generated based on the lines for cutting (this is a separate topic of discussion)

Answer 3

And how do you go over all the pixels, make an array of parts, determine the center for each component of the puzzle and where approximately it should be? I don’t rummage about this issue, and I didn’t do it, I’m just curious, maybe this will suit you.