Jigsaw Puzzle by Raymond Hill: An HTML5 <canvas>-based jigsaw puzzle

Jigsaw Puzzle by Raymond Hill: Using HTML5 <canvas>This page requires Javascript to display properly, however Javascript is disabled or your browser doesn't support Javascript.

How to play:

Click on a piece to move it, click again to release it
Left and right arrows (or alternatively 'A' or 'D', or mousewheel) to rotate a piece
Up and down arrows (or alternatively 'W' or 'S') to send a piece behind or on top of other pieces
'E' to toggle on/off visibility of non-edge pieces
'Q' to show/hide preview tile
Space bar to show/hide non-composite pieces (pieces made up of two or more atomic pieces)

Preferred screen size:
Preferred number of pieces: A high number of pieces can cause a delay at creation time.

Click on a thumbnail below to create a jigsaw puzzle with the above settings.

Cut

Screen size	(Screen size determine work area size, which determine puzzle size, which influence the size of individual pieces)

Suggested number of pieces	(This number is used as a guide only, restrictions may apply. More pieces = smaller pieces)

Complexity of puzzle pieces

Whether pieces can be rotated

URL of picture to use	(Of interest: general collections of public domain images)

Beware: Clicking on the “Create” button will cause the current jigsaw puzzle in the “Solve” tab to be replaced. Also, note that the more pieces there are, the longer it will take to generate the jigsaw puzzle, so you might experience a delay.

You can generate a permalink of the current state of your puzzle (progress included!):

Email this permalink to...

Alternatively, you can generate a Jigsaw Puzzle Key identifying uniquely the current state of your puzzle (progress included!):

(Be sure to copy all the characters!)

You can save this key for later use, or you can send this key to a friend, who can then use it to generate the same puzzle on his side.

A friend sent you a Jigsaw Puzzle Key? Enter it here to generate his/her custom-made jigsaw puzzle in your “Solve” tab:

(Be sure to paste all the characters!)

Beware: Clicking on the “Create” button will cause the current jigsaw puzzle to be replaced (Your selected “Screen size” setting will be preserved though.)

Jigsaw Puzzle by Raymond Hill: Project's Home page

I started this project as an experiment with the HTML5 canvas element. It grew a bit bigger than what I had imagined, as I kept adding features, just for the fun and challenge of dealing with geometrical concepts. Also, for jigsaw puzzle fans out there, I am just happy to enable you to create your own puzzle, small or big, easy or hard, and with no strings attached (no ads, no questions asked, etc.)

I am currently working on the next release in which I would like to allow fancy tiling.

Portions of this software use the work of...

Images:
- “Autumn Fruits”, by Petr Kratochvil: The default picture used in preview mode.
- “Melbourne Australia”, by Michael Stirling: The default picture used in full mode.
Sound effects:
Software:
- “SoundManager 2”, by Scott Schiller: An excellent library that brings audio functionality to Javascript. No longer used in the latest version, HTML5 <audio> tag is now used.
- “Calculating the area and centroid of a polygon”, by Paul Bourke: For his code snippets on how to calculate the centroid of a polygon (necessary to be able to rotate pieces properly.)
- “Javascript base64”: For the code snippet on how to encode/decode Base 64 (I used Base 64 to encode/decode Jigsaw Puzzle Keys, the current mechanism to share custom-made puzzles.
- “Event properties / Mouse position”, by Peter-Paul Koch: For his code snippet on how to correctly detect mouse coordinates.

Jigsaw Puzzle by Raymond Hill is licensed under a MIT License (MIT):

Copyright (c) 2009-2011 Raymond Hill

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.