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

我想给网站添加一个小拼图 但是小提琴中显示的代码并不是代表整个图像，它只代表图像的一小部分，有人能给出解决方案吗 这是密码

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();

函数drawImage（imageObj）{
var piecesArray=新数组（）；
var水平碎片=3；
垂直件变量=3；
var imageWidth=imageObj.width；
var imageHeight=imageObj.height；
var pieceWidth=数学圆（图像宽度/水平块）；
var pieceHeight=数学圆（imageHeight/verticalPieces）；
var阶段=新的动力学阶段({
容器：“容器”，
宽度：window.innerWidth，
高度：window.innerHeight
});
var layer=新的动能层（）；
对于（i=0；i0）{
piecesArray[i][j]。左=1-piecesArray[i-1][j]。右；
}
piecesArray[i][j].shape=新的动能.shape({
drawFunc：函数（i，j，pieceWidth，pieceHeight，tileObj）{
返回函数（画布）{
var x8=数学圆（工件宽度/8）；
变量y8=数学圆（件高/8）；
var context=canvas.getContext（）；
context.beginPath（）；
context.moveTo（0,0）；
如果（j！=0）{
lineTo（3*x8,0）；
如果（tileObj.up==1）{
二次曲线（2*x8，-2*y8,4*x8，-2*y8）；
二次曲线（6*x8，-2*y8,5*x8,0）；
}
否则{
二次曲线（2*x8,2*y8,4*x8,2*y8）；
二次曲线（6*x8,2*y8,5*x8,0）；
}
}
lineTo（8*x8,0）；
如果（i！=水平件-1）{
lineTo（8*x8,3*y8）；
if（tileObj.right==1）{
二次曲线（10*x8,2*y8,10*x8,4*y8）；
二次曲线（10*x8,6*y8,8*x8,5*y8）；
}
否则{
二次曲线（6*x8,2*y8,6*x8,4*y8）；
二次曲线（6*x8,6*y8,8*x8,5*y8）；
}
}
lineTo（8*x8,8*y8）；
如果（j！=垂直件-1）{
lineTo（5*x8,8*y8）；
如果（tileObj.down==1）{
二次曲线（6*x8,10*y8,4*x8,10*y8）；
二次曲线（2*x8,10*y8,3*x8,8*y8）；
}
否则{
二次曲线（6*x8,6*y8,4*x8,6*y8）；
二次曲线（2*x8,6*y8,3*x8,8*y8）；
}
}
lineTo（0,8*y8）；
如果（i！=0）{
上下文。lineTo（0,5*y8）；
if（tileObj.left==1）{
二次曲线（-2*x8,6*y8，-2*x8,4*y8）；
二次曲线（-2*x8,2*y8,0,3*y8）；
}
否则{
二次曲线（2*x8,6*y8,2*x8,4*y8）；
二次曲线（2*x8,2*y8,0,3*y8）；
}                          
}
lineTo（0,0）；
canvas.fillStroke（这个）；
}
}（i，j，工件宽度，工件高度，工件射线[i][j]，
fillPatternImage:imageObj，
x:-工件宽度*i，
y:-工件高度*j，
笔划：“000000”，
冲程宽度：4，
线头：“圆形”，
旋转：Math.PI*0.5*Math.floor（Math.random（）*4），
真的，
偏移量：[工件宽度/2，工件高度/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），
});
piecessarray[i][j].shape.on（“mousedown”，function（））{
这是moveToTop（）；
});
piecesArray[i][j].shape.on（“单击”，函数（）{
这是moveToTop（）；
这是旋转的（90）
layer.draw（）；
});   
layer.add（piecessarray[i][j].shape）；
}
}
阶段。添加（层）；
}
var jigsaw=函数（）{
var imageObj=新图像（）；
imageObj.src=”https://dl.dropboxusercontent.com/s/n9wrfvy9h4p5ufs/kidwallpaper.jpg";
imageObj.onload=函数（）{
绘图图像（本）；
}
}
拼图（）；

fiddle无法正常工作