JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.10/bacon.min.js"></script>
<canvas id="pb-graph"></canvas>

CSS

#pb-graph{
    width: 500px;
    height: 400px;
    /*left: 50%;*/
    /*top:0;*/
    position: relative;
    /*margin-left: -250px;*/
    /*margin-top: 20px;*/
    border: 1px solid black;
    background: darkgreen;
    cursor: pointer;
}

JavaScript

function Point3D(x, y, z){
    this.x = x;
    this.y = y;
    this.z = z;
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}

String.format = function() {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i + 1]);
    }

    return s;
};

function Pen(width, color) {
    this.width = width;
    this.color = color;
};

function Font(size, name) {
    this.name = name;
    this.size = size;
};

CanvasRenderingContext2D.prototype.drawLines = function(pen, points) {
    this.beginPath();
    this.strokeStyle = pen.color;
    this.lineWidth = pen.width;
    var i, x, y;
    x = points[0].x;
    y = points[0].y;
    for (i = 1; i < points.length; i++) {
        this.drawLine(pen, x, y, points[i].x, points[i].y);
        x = points[i].x;
        y = points[i].y;
    }
    this.save();
    this.stroke();
    this.closePath();
}

CanvasRenderingContext2D.prototype.drawRectangle = function(pen, x, y, width, height) {
    this.drawLine(pen, x, y, x + width, y, 1);
    this.drawLine(pen, x + width, y, x + width, y + height);
    this.drawLine(pen, x + width, y + height, x, y + height);
    this.drawLine(pen, x, y + height, x, y);

    this.beginPath();
    this.fillStyle = 'rgba(0, 0, 0, 0.2)';
    this.fillRect(x + 1, y + 1, width - 1, height - 1);
    this.fill();
    this.closePath();
};


CanvasRenderingContext2D.prototype.roundRect =

function(pen, x, y, width, height, radius) {
    //if (typeof stroke == "undefined" ) {
    //stroke = true;
    //}
    if (typeof radius === "undefined") {
        radius = 5;
    }
    this.beginPath();
    this.strokeStyle = 'red';
    this.lineWidth = 1;
    this.moveTo(x + radius, y);
    this.lineTo(x + width - radius, y);
    this.quadraticCurveTo(x + width, y, x + width, y + radius);
    this.lineTo(x + width, y + height - radius);
    this.quadraticCurveTo(x + width, y + height, x + width - radius, y...