sney2002 supports this item


254 comments found.

hi , how i change the defult number of pieces in start? when i click shuffle . it give me 25 pieces and i want 16 pieces (parts of puzzle) thanks yogev

in what file i find (or add?) this default pieces? thanks!

In index.php

thanks !

Hi, presales question : Can this project be embedded in a Angular/Typescript project easily ?

It can be embedded, But is not as straightforward. you have to create a declaration file (I’m assuming is angular 2)

declare function require(path: string): any;
export let Jigsaw: any = require('./js/canvas-puzzle.min');
in your component html file include the game template:
<div id="canvas-wrap">
  <canvas id="canvas" class="canvas"></canvas>
  <canvas class="hidden canvas" id="image"></canvas>
  <canvas class="hidden canvas" id="image-preview"></canvas>
you can’t “hide” the element with an ng-if because the game needs the canvas element, you must hide it with css (display: none).

there are some elements that the game assume are present in the html (timer, some buttons, modals…) that if you are not going to use you have to remove that part of the code from the game code because it will raise an error

G’day. Some pre-sales questions:- Can sound be added? Can canvas-size be full-screen? I use a program called HTML5 Executable and am wondering if output puzzles could be packed using it? Thanks. Graeme DB.


if it doesn’t take a lot of time I can do it for free, just send me a message through my profile page

G’day, Thanks for your offer, as above. Since having bought an extended licence and downloaded your HTML Puzzle i have more questions to ask you. I have imported my own picture and saved my puzzle with a new file name. I then attempt to open the puzzle but all i see appear is the word “hola”, inside a frame.

Please send me a link to the game to see what the problem is


wc4seo Purchased

i cannot use it please tell me. I want to used game in my wordpress


The game is not a wordpress plugin, if you want you could ask for a refund.


terapi Purchased

can we add a border after the puzzle is over?

Hello, I have one pre-sale question : Can we disable the random shuffle of the pieces when game starts i.e. the puzzle pieces are placed at exactly the same location each time when the game loads?

Many thanks for your help!


Yes, it can be disabled. if the shuffle is disabled the puzzle is shown assembled

Thanks for your reply. What I mean is to scatter each of the puzzle pieces at EXACTLY the same location every time the game starts; as I intend to make it a competition to award the players who can complete the game in shorter times.

Many thanks!!

Are you providing the latest version for download? I found some problem when open the site in ipad. And after compared the download version and your demo site’s code, there are many code different!!!


Sorry about that, please send me a message and I will send you the latest version.

Hey, nice product you have there, I wanna ask you something prior buying …

I want to know if it is easy/possible to customize a bit this game. I wanna make this game interactive to promote some products :

I wanna promote some products – this week we will have x product at a huge discount – member to finish the puzzle and to be redirected to the specific page. ( i will add the links and the picture by myself every week changing the picture direct path in html without a problem )

I wanna know if it is difficult add/change this at the game:

- The picture to be already shuffled. when the site is loaded to have a shuffled picture, ( at refresh to have a shuffled picture ) - remove the upload picture button ( remove Create puzzle button – i dont want users to upload pictures only those selected by me ) - remove “pieces selection button” ( i wanna have a default setting 12 or 20, I dont want user to change this.) - to be able to add the game in a specific div class on a page (i want to be a part of the page, not a full-screen game.)

It is possible for me to make these changes? I don’t know how, but if you are willing to send me the modified codes I have to change I will gladly buy this game

Thank you sorry for this long message.

Well .. .. no answer in 2 weeks


tkghosh Purchased


Instate of ‘click’ I want to trigger ‘PREVIEW’ mouse down, and when mouse up, the preview will be disappear.

thanks in advance. Tarun


aZilk Purchased

PLEASE HELP ME: Where do I find this code below? I don’t even see it in index.php.

“Below is an example with all available options and their defaults values:”

jsaw = new jigsaw.Jigsaw({ defaultImage: “images/puzzle/scottwills_meercats.jpg”, // required maxWidth: 768, // max height of the image. maxHeight: 500, // max width of the image. redirect: ””, // redirect to this url when the puzzle is complete border: true, // draw a border around the pieces shuffled: false, // shuffle the puzzle on load rotatePieces: true // rotate the pieces spread: .7, // percent of the page to spread the pieces offsetTop: 0, piecesNumberTmpl: “%d Pieces”, // template for piece selector }); C) Redirect to another page – top So you want to create a contest and save the scores in your database? just specify a url to redirect when the puzzle is complete:

? 1 2 3 4 var jsaw = new jigsaw.Jigsaw({ redirect: “” });


I just sent you an email


aZilk Purchased

THANK YOU TO THE AUTHOR! Helped me right away and also with another need I had – Excellent – sney2002 AUTHOR

Is there a way to hide individual pieces? I need to hide one, two, three pieces, etc…. Any help is appreciated. Thank you. Instead of showing just edge or middle how can I display image puzzle pieces I would like.


There are two kinds of pieces: “piece” (individual piece) and group, you can hide one as follow:

var pieces = jsaw.ce.getAll('piece');
pieces[0].hide = true;
or you can hide any piece by column and row:
function getCol(piece) { return piece.col; }
function getRow(piece) { return piece.row; }

var pieces = jsaw.ce.getAll('piece');
var maxCol = Math.max.apply(null,;
var maxRow = Math.max.apply(null,;

function findPiece(col, row) {
   return jsaw.ce.getAll('piece').find(function(piece) {
      return piece.col === col && piece.row === row;

function showPiece(col, row) {
 var piece = findPiece(col, row);
 if (piece) {
    piece.hide = false;

function hidePiece(col, row) {
 var piece = findPiece(col, row);
 if (piece) {
    piece.hide = true;

// hide top left corner
hidePiece(0, 0);
// hide bottom right corner
hidePiece(maxCol, maxRow);
when two pieces are connected they are no longer returned by jsaw.ce.getAll(‘piece’), you can get the groups with jsaw.ce.getAll(‘group’).

Hope this helps you.



I couldn’t get this to work. I sent you e-mail. Thanks.

I just sent you an email.

HI, first all before I want to buy I have several question 1) After buy i can get this source code where I can customize it based on my requirement 2) Does max pieces only support until 108 pieces? 3) if i can customize I want to sound first start game, then success with sound. If all this can do please let me know.


1. yes, you get the source code.
2. you can use as many piece as you want (but be sure the pieces are still big enough to play the game)
3. there are event for when the game starts and when it is completed. you can run custom javascript there to play the sounds you want



Hello, I don’t want my visitors use their own image. Can I limit the puzzle to use only the image I provide? Can I limit the piece counts to only 3 options, for example, 12, 20, 30, etc? Can I add this puzzle in a Wordpress page? With iFrame maybe? Sam

Yes, you can buy and I’ll do the changes. if is not what you need I can give you a refund.

Ok, I have made the purchase. Thanks.

Send me a message through my profile page

in mobile i can add unlimited images as per my requirement