JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

CSS

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

JavaScript

function dBezierCurve() {
    var args = Array.prototype.slice.call(arguments);
    var context = ctx;
    if (args[0].length > 2) {
        args = args[0];
    }
    if (args.length < 2) {
        throw new Error("not enough points");
        return;
    }
    //context.beginPath();
     context.lineTo(args[0].x, args[0].y);

    for (var i = 1; i < args.length + 1; i++) {
        //these get the args before and after arg[i] it is so long because i am checking to make sure it actually exists if not it gets the remainder of it divided by the total args 
        var before = new Point(args[(i + (args.length - 1)) % args.length].x, args[(i + (args.length - 1)) % args.length].y);
        var after = new Point(args[(i + (args.length + 1)) % args.length].x, args[(i + (args.length + 1)) % args.length].y);
        var current = new Point(args[(i + (args.length)) % args.length].x, args[(i + (args.length)) % args.length].y);
        var before2 = new Point(args[(i + (args.length - 2)) % args.length].x, args[(i + (args.length - 2)) % args.length].y);


        //these are taking the difference of the points before and after divides it by controlpoint and adds or subtracts that from the middle point to get the bezier control points
        var mid1 = new Point(before.x - ((before2.x - current.x) / controlpoint), before.y - ((before2.y - current.y) / controlpoint));
        var mid2 = new Point(current.x + ((before.x - after.x) / controlpoint), current.y + ((before.y - after.y) / controlpoint));
        context.bezierCurveTo(mid1.x, mid1.y, mid2.x, mid2.y, current.x, current.y);

    }

}

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.d = Math.sqrt(x * x + y * y);
}
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...