JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

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) {
        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);
        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));
       ...