jigsaw puzzle

HTML

<canvas draggable="true" puzzle=true id="puz"></canvas>

CSS

[puzzle] {
    width:auto;
    height:auto;
    display:block;
    position:absolute;
    top:100px;
    left:200px;
}

JavaScript

var pieces = new Array();
var dragleft=0;
var dragtop=0;
var dragobj=null;
var puzzle = document.getElementById("puz");
var imagegoth = new Image();
puzzle.setAttribute("class","drag");
pieces.push(puzzle);
imagegoth.onload = imageloaded;
imagegoth.src = "http://www.teestackers.com/js-daily-jigsaw-puzzle-23.jpg";
function imageloaded()
{
    puzzle.style.top="0px";
    puzzle.style.left = "0px";
    puzzle.getContext("2d").arc(106,50,12,0,Math.PI*2,false);
    puzzle.getContext("2d").rect(0,0,100,100);
    puzzle.getContext("2d").clip();
    puzzle.getContext("2d").drawImage(imagegoth,0,0,120,100,0,0,120,100);
    puzzle.style.width=120;
    puzzle.style.height=100;
    var puzzle2=document.createElement("canvas");
    pieces.push(puzzle2);    
    puzzle2.setAttribute("draggable","true");
    puzzle2.setAttribute("puzzle","true");

    puzzle2.style.top="0px";
    puzzle2.style.left = "150px";
    puzzle2.getContext("2d").arc(12-6,50,12,0,Math.PI*2,true);
    puzzle2.getContext("2d").rect(0,0,100,100);
    puzzle2.getContext('2d').clip();
   puzzle2.setAttribute("class","drag"); puzzle2.getContext("2d").drawImage(imagegoth,100,0,100,110,0,0,100,110);
    puzzle2.style.width = "auto";
    puzzle2.style.height = "auto";    
    document.body.appendChild(puzzle2);
/*    var tmpCanv=document.createElement("canvas");
    var tmpCtx = tmpCanv.getContext("2d");
    tmpCanv.setAttribute("puzzle","true");
    tmpCanv.style.top="0px";
    tmpCanv.style.left = "100px"
    tmpCtx.save();
    //tmpCtx.beginPath();
    tmpCtx.arc(3, 50, 12, 0, Math.PI * 2, true);
    //tmpCtx.closePath();
    //tmpCtx.beginPath();
    //tmpCtx.rect(0,0,50,100);
    
    //tmpCtx.closePath();
    //tmpCtx.stroke();
    tmpCtx.clip();
    //tmpCtx.rect(0,0,110,120);
    //tmpCtx.restore();

    tmpCtx.drawImage(imagegoth,100,0,120,110,0,0,120,110);

    //tmpCtx.beginPath();
    //tmpCtx.arc(0, 0, 25, 0, Math.PI * 2, true);
    //tmpCtx.clip();
    //tmpCtx.closePath();
    //tmpCtx.restore();
...