JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var rotation = 0;
function newPiece(x,y,width,height) {
    
    var can = document.createElement("canvas");
    can.width = 400;
    can.height = 500;
    document.body.appendChild(can);
    function draw(){
    var ctx = can.getContext('2d');
    ctx.lineWidth = 1;
    ctx.beginPath();


    tenpointbezier(ctx, x, y, x+width, y);
    ctx.lineTo(x+(width/2.0),y+(height/2.0));
    tenpointbezier(ctx,x+width, y, x+width, y+width);
    ctx.lineTo(x+(width/2.0),y+(height/2.0));
    tenpointbezier(ctx, x, y+width, x+width, y+width);
    ctx.lineTo(x+(width/2.0),y+(height/2.0));
    tenpointbezier(ctx,  x,y,x, y+width);
    ctx.lineTo(x+(width/2.0),y+(height/2.0));
ctx.fill();
//ctx.stroke();
//ctx.rect(25,25,225,225);
ctx.closePath();
ctx.clip();
    };
    draw();
    can.onclick = function(){
        var ctx = can.getContext('2d');
        ctx.rotate(rotation+=Math.PI/4.0);
        ctx.fill();
        this.draw();
        console.log(rotation);
    };
};

newPiece(100,100,100,100).draw;



function tenpointbezier(ctx, x1, y1, x2, y2) {

    var delta = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2))) / 3.0;
    var deltax = (x1 - x2) / ((x1 - x2) + (y1 - y2));
    var deltay = (y1 - y2) / ((x1 - x2) + (y1 - y2));
    var seg1 = (Math.round(Math.random()) * 2) - 1;
    var sharpx = [((x1 + x2) / 2.0) + (deltax * delta / 3.0), ((x1 + x2) / 2.0) - (deltax * delta / 3.0)];
    var sharpy = [((y1 + y2) / 2.0) + (deltay * delta / 3.0), ((y1 + y2) / 2.0) - (deltay * delta / 3.0)];
    x3 = ((x1 + x2) / 2.0) + (deltax * delta / 2.0) + (seg1 * deltay * delta / 2.0);
    y3 = ((y1 + y2) / 2.0) + (deltay * delta / 2.0) + (seg1 * deltax * delta / 2.0);
    x4 = ((x1 + x2) / 2.0) - (deltax * delta / 2.0) + (seg1 * deltay * delta / 2.0);
    y4 = ((y1 + y2) / 2.0) - (deltay * delta / 2.0) + (seg1 * deltax * delta / 2.0);
    var points = [x1,y1,sharpx[1],sharpy[1],sharpx[1],sharpy[1],x4,y4,x4+(seg1*deltay*delta/1.5),y4+(seg1*deltax*delta/1.5), x3 + (seg1 * deltay *...