JSFiddle - React, Tailwind, and code Playground

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 =20;
var rows = 30;
var img1 = new Image();
img1.src = "http://www.screensavergift.com/wp-content/uploads/2011/01/SuperSexyGirls1.jpg";
img1.onload = function(){
    var p= new Array();

function Piece(x,y,width,height,sx,sy) {
    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.setAttribute("draggable", "true");
    this.canvas.setAttribute("class","drag");
    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);
    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);
    //ctx.lineTo((this.can.width/2.0),(this.can.height/2.0));
    this.canvas.topside.push((this.can.width/2.0),(this.can.height/2.0));
    
    this.canvas.rightside = tenpointbezier(ctx,imagex+(this.can.width/2.0), (this.can.height/2.0)-imagey, imagex+(this.can.width/2.0), imagey+(this.can.height/2.0));
    //ctx.lineTo((this.can.width/2.0),(this.can.height/2.0));
    this.canvas.rightside.push((this.can.width/2.0),(this.can.height/2.0));
    
    this.canvas.bottomside = tenpointbezier(ctx,...