JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

* {
    margin:0px;
    padding:0px;
    overflow:hidden;
}
canvas {
    outline:1px black solid;
}

JavaScript

var Point = function Point(e, t) {
    this.x = e;
    this.y = t;
    this.d = Math.sqrt(e * e + t * t)
}

var drawOver = function drawOver(e) {
    var t = this.globalCompositeOperation;
    this.globalCompositeOperation = "source-atop";
    this.save();
    e.bind(this)();
    this.restore();
    this.globalCompositeOperation = t
}
Point.prototype = {
    slopeTo: function (e) {
        return (this.y - e.y) / (this.x - e.x)
    },
    distanceTo: function (e) {
        return Math.sqrt((this.y - e.y) * (this.y - e.y) + (this.x - e.x) * (this.x - e.x))
    },
    distanceByAxis: function (e) {
        return new Point(this.x - e.x, this.y - e.y)
    },
    normalize: function () {
        return new Point(this.x / this.d, this.y / this.d)
    }
};
var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    can = document.createElement("canvas"),
    timer, c = can.getContext("2d"),
    w = 100,
    controlpoint = 4,
    h = 100;
ctx.paths = [
    []
];
ctx.paths[0].name = 0;
canvas.height = can.height = window.innerHeight;
canvas.width = can.width = window.innerWidth;
document.body.appendChild(canvas);
Object.getOwnPropertyNames(Object.getPrototypeOf(ctx)).forEach(function (e) {
    if (typeof Object.getPrototypeOf(ctx)[e] === "function") {
        console.log(e);
        var t = Object.getPrototypeOf(ctx)[e];
        ctx["_" + e] = Object.getPrototypeOf(ctx)[e];
        ctx[e] = function () {
            if (e === "beginPath") {
                ctx.paths.push([]);
                ctx.paths[ctx.paths.length - 1] = [];
                
            }
            var t = arguments;
            var n = function () {
                return ctx["_" + e].apply(ctx, t)
            };
            ctx.paths[ctx.paths.length - 1].push(n);
            n()
        }
    }
});
ctx.beginPath();
ctx.moveTo(w, h);
ctx.lineTo(w + w, h);
ctx.lineTo(w + w, h + h);
ctx.lineTo(w, h + h);
ctx.fill();
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(25,...