JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<img hidden=true id="image" style="position:absolute;visibility:hidden;" src="http://i.imgur.com/e11KGBY.jpg"></img>

JavaScript

function clone(obj) {
    if (null === obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.d = Math.sqrt(x * x + y * y);
    return this;
}
Point.prototype = {
    slopeTo: function (p) {
        return (this.y - p.y) / (this.x - p.x);
    },
    distanceTo: function (p) {
        return (Math.sqrt(((this.y - p.y) * (this.y - p.y)) + ((this.x - p.x) * (this.x - p.x))));
    },
    distanceByAxis: function (p) {
        return (new Point(this.x - p.x, this.y - p.y));
    },
    normalize: function () {
        return new Point(this.x / this.d, this.y / this.d);
    }
};
var puzzlePiece = (function () {
    function puzzlePiece(obj) {

        this.imgtop = clone(obj.top);

        this.imgright = clone(obj.right);
        this.imgbottom = clone(obj.bottom);
        this.imgleft = clone(obj.left);
        this.rotation = obj.rotation;
        this.image = obj.image;
        this.width = obj.width + 0;
        this.height = obj.height + 0;
        this.canvas = document.createElement("canvas");

        this.canvas.rotation = 0;
        this.connected = [];
        this.canvas.setAttribute("style", "position:absolute;");
        this.canvas.setAttribute("width", obj.width * 3);
        this.canvas.setAttribute("height", obj.height * 3);
        this.canvas.style.setProperty("top", this.imgtop.first.y + 1 + "px");
        this.canvas.style.setProperty("left", this.imgtop.first.x + 1 + "px");
        //this.canvas.ondblclick = dblclick;

        this.context = this.canvas.getContext('2d');


        document.body.appendChild(this.canvas);
        this.top = {
            "first": new Point((this.canvas.height / 2) - (obj.width / 2.0), (this.canvas.height / 2) - (obj.height / 2.0)),
                "last": new Point((this.canvas.height / 2) + (obj.width / 2.0),...