puzzler

puzzle

by Darby Rathbone

CSS

[puzzle] {
    display:block;
    position:absolute;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
    -ms-user-select: none;
    user-select: none;
}

JavaScript

var columns = 10;
var rows = 30;
var img1 = new Image();
img1.src = "http://crazyprofile.com/myspace_graphics/imgs/gothic_girls026.jpg";
img1.onload = function () {
    var p = new Array();

    function Piece(x, y, width, height, sx, sy, settop, setright, setbottom, setleft) {
        var w = width,
            h = height;
        //width = Math.sqrt((width*width)+(height*height));
        //height = width;
        sx -= width / 2.0;
        sy -= height / 2.0;
        sx *= -1;
        sy *= -1;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;

        this.canvas = document.createElement("canvas");
        this.canvas.setAttribute("puzzle");

        this.canvas.rotation = 0;
        this.canvas.style.top = y + "px";
        this.canvas.style.left = x + "px";
        this.can = this.canvas;
        this.can.width = w * 2;
        this.can.height = h * 2;
        document.body.appendChild(this.can);
        this.can.sx = sx;
        this.can.sy = sy;
        var ctx = this.can.getContext('2d');

        //ctx.save();
        //ctx.scale(h/(w+h),w/(w+h));
        ctx.lineWidth = 1;
        ctx.beginPath();
        //  ctx.translate(this.width/2.0,this.height/2.0);
        //ctx.translate(-this.width/2.0,-this.height/2.0);
        var imagex = width / 2.0;
        var imagey = height / 2.0;
        ctx.moveTo((this.can.width / 2.0) - imagex, (this.can.height / 2.0) - imagey);
        if (settop === 'undefined' || settop === 'null' || settop !== 0)
        {
        
        this.canvas.topside = tenpointbezier(ctx, (this.can.width / 2.0) - imagex, (this.can.height / 2.0) - imagey, imagex + (this.can.width / 2.0), (this.can.height / 2.0) - imagey);
        }
        else if (settop === 0 )
        {
            //this.canvas.topside = 
        ctx.lineTo((this.can.width/2.0),(this.can.height/2.0));
        }
        else if (settop.length ===10)
        {
            tenpointbezier(
           
        }
       ...