Creation of a jigsaw puzzle using HTML5 Canvas and KineticJS – step2: real jigsaw pieces

Talking about Jigsaw Game game, Game development, HTML5 and Javascript.

Learn cross platform HTML5 game development

Check my Gumroad page for commented source code, games and books.

Yesterday I started playing with KineticJS and created the bare bones for a jigsaw puzzle prototype.

Today I added a few lines, creating a draggable shape of a jigsaw piece filled with the original image at lines 59-89 using Canvas drawing methods moveTo, lineTo, quadraticCurveTo:

And if you look at the working example, you will see a real jigsaw piece ready to be moved around.

Next step will be the transformation of the entire image into random jigsaw pieces, stay tuned!

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.