title: I want to create a jigsaw puzzle in my website using html / javascript
body: <p><a href="http://jsfiddle.net/Darbicus/VBeGF/" rel="nofollow">http://jsfiddle.net/Darbicus/VBeGF/</a>
  I want to add a small puzzle to website 
  but the shown code in the fiddle is not taking for the whole image,its taking only small part of the image,can any one give the solution please
  Here is the code</p>
  
  <pre><code>function drawImage(imageObj) {
          var piecesArray=new Array();
          var horizontalPieces = 3;
          var verticalPieces = 3;
          var imageWidth = imageObj.width;
          var imageHeight = imageObj.height;
          var pieceWidth = Math.round(imageWidth/horizontalPieces);
          var pieceHeight = Math.round(imageHeight/verticalPieces);
          var stage = new Kinetic.Stage({
              container: "container",
              width: window.innerWidth,
              height: window.innerHeight
          });
          var layer = new Kinetic.Layer();
          for(i=0;i&lt;horizontalPieces;i++){
              piecesArray[i]=new Array();
              for(j=0;j&lt;verticalPieces;j++){
                  piecesArray[i][j] = new Object();
                  piecesArray[i][j].right=Math.floor(Math.random()*2);
                  piecesArray[i][j].down=Math.floor(Math.random()*2);
                  if(j&gt;0){
                      piecesArray[i][j].up=1-piecesArray[i][j-1].down;        
                  }
                  if(i&gt;0){
                      piecesArray[i][j].left=1-piecesArray[i-1][j].right;     
                  }
                  piecesArray[i][j].shape=new Kinetic.Shape({
                      drawFunc: function(i,j,pieceWidth,pieceHeight,tileObj){
                          return function(canvas) {
                              var x8=Math.round(pieceWidth/8);
                              var y8=Math.round(pieceHeight/8);
                              var context = canvas.getContext();
                              context.beginPath();
                                context.moveTo(0,0);
                                if(j!=0){
                                  context.lineTo(3*x8,0);
                                  if(tileObj.up==1){
                                      context.quadraticCurveTo(2*x8,-2*y8,4*x8,-2*y8);
                                      context.quadraticCurveTo(6*x8,-2*y8,5*x8,0);    
                                  }
                                  else{
                                      context.quadraticCurveTo(2*x8,2*y8,4*x8,2*y8);
                                      context.quadraticCurveTo(6*x8,2*y8,5*x8,0);
                                  }
                              }
                                  context.lineTo(8*x8,0);
                                if(i!=horizontalPieces-1){
                                  context.lineTo(8*x8,3*y8);
                                  if(tileObj.right==1){
                                      context.quadraticCurveTo(10*x8,2*y8,10*x8,4*y8);
                                      context.quadraticCurveTo(10*x8,6*y8,8*x8,5*y8);
                                    }
                                    else{
                                      context.quadraticCurveTo(6*x8,2*y8,6*x8,4*y8);
                                      context.quadraticCurveTo(6*x8,6*y8,8*x8,5*y8);
                                  }
                              }
                              context.lineTo(8*x8,8*y8);
                                if(j!=verticalPieces-1){
                                  context.lineTo(5*x8,8*y8);
                                  if(tileObj.down==1){
                                      context.quadraticCurveTo(6*x8,10*y8,4*x8,10*y8);
                                      context.quadraticCurveTo(2*x8,10*y8,3*x8,8*y8);
                                  }
                                  else{
                                      context.quadraticCurveTo(6*x8,6*y8,4*x8,6*y8);
                                      context.quadraticCurveTo(2*x8,6*y8,3*x8,8*y8);
                                  }
                              }
                                context.lineTo(0,8*y8);
                                if(i!=0){
                                  context.lineTo(0,5*y8);
                                  if(tileObj.left==1){
                                      context.quadraticCurveTo(-2*x8,6*y8,-2*x8,4*y8);
                                      context.quadraticCurveTo(-2*x8,2*y8,0,3*y8);
                                    }
                                    else{
                                      context.quadraticCurveTo(2*x8,6*y8,2*x8,4*y8);
                                      context.quadraticCurveTo(2*x8,2*y8,0,3*y8);
                                  }                          
                              }
                                context.lineTo(0,0);
                              canvas.fillStroke(this);
                              }
                      }(i,j,pieceWidth,pieceHeight,piecesArray[i][j]),
                          fillPatternImage:imageObj,
                          x:-pieceWidth*i,
                          y:-pieceHeight*j,
                          stroke: "#000000",
                          strokeWidth: 4,
                          lineCap: "round",
                          rotation : Math.PI * 0.5 * Math.floor(Math.random() * 4),
                          draggable: true,
                          offset: [pieceWidth/2,pieceHeight/2],
                      x: pieceWidth*i+pieceWidth/2 + (Math.random()*2)*((stage.getWidth()+pieceWidth)/20),
                      y: pieceHeight*j+pieceHeight/2 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/20),
                  });
                  piecesArray[i][j].shape.on("mousedown", function(){
                      this.moveToTop();
                      });
                  piecesArray[i][j].shape.on("click", function(){
                      this.moveToTop();
                      this.rotateDeg(90)
                      layer.draw();
                      });   
                  layer.add(piecesArray[i][j].shape);
              }
          }
          stage.add(layer);
      }
  var jigsaw = function() {
          var imageObj = new Image();
          imageObj.src = "https://dl.dropboxusercontent.com/s/n9wrfvy9h4p5ufs/kidwallpaper.jpg";
          imageObj.onload = function () {
              drawImage(this);
          }
      }
      jigsaw();
  </code></pre>