JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/event-emiter.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/canvas-event.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/js/canvas-puzzle.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/modal.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/style.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5308045/canvas-puzzle/css/buttons.css">
<!-- JIGSAW CANVAS -->
<div id="canvas-wrap">
<canvas id="canvas"></canvas>
<canvas class="hide" id="image"></canvas>
<canvas class="hide" id="image-preview"></canvas>
</div>
<!-- GAME OPTIONS -->
<div id="game-options">
<ul>
<li><b id="clock" class="button">00:00:00</b></li>
<li><a href="#" id="SHOW_EDGE" class="button left" title="Show edge pieces only">Border</a></li>
<li><a href="#" id="SHOW_MIDDLE" class="button middle" title="Show middle pieces only">Middle</a></li>
<li><a href="#" id="SHOW_ALL" class="button right" title="Show all pieces">All</a></li>
<li><a href="#" id="JIGSAW_SHUFFLE" class="button left" title="Shuffle">Shuffle</a></li>
<li><a href="#" id="SHOW_PREVIEW" class="button middle" title="Preview">Preview</a></li>
<li><a href="#" id="SHOW_HELP" class="button help right" title="Help">Help</a></li>
<!-- INSERT CUSTOM BUTTONS -->
<!-- END INSERT CUSTOM BUTTONS -->
<li>
<div class="styled-select">
<select id="set-parts" selected-index="8">
</select>
</div>
</li>
<!-- Insert custom buttons here -->
<li id="create"><a href="#" class="button add" id="SHOW_FILEPICKER" title="Create puzzle" >Create puzzle</a></li>
</ul>
<br class="clear"/>
</div>
<!-- MODAL WINDOW -->
<div class="hide" id="overlay"></div>
<div id="modal-window"...
JavaScript
;(function() {
var jsaw = new jigsaw.Jigsaw({
defaultImage: "http://images7.alphacoders.com/444/444434.jpg",
piecesNumberTmpl: "%d Pieces"
});
if (jigsaw.GET["image"]) { jsaw.set_image(jigsaw.GET["image"]); }
// this is just an example
}());