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

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!

  • ern

    when I try it with my own image.
    I see the image in the background but the jigsawpiece is completely black??