我想用我的网站使用html / javascript创建一个拼图游戏

Question

http://jsfiddle.net/Darbicus/VBeGF/ 我想在网站上添加一个小谜题 但是小提琴中显示的代码并没有占据整个图像，它只占用了一小部分图像，任何人都可以提供解决方案 这是代码

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<horizontalPieces;i++){
            piecesArray[i]=new Array();
            for(j=0;j<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>0){
                    piecesArray[i][j].up=1-piecesArray[i][j-1].down;        
                }
                if(i>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();