JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas></canvas>

CSS

body, html {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}
canvas {
    outline:black 1px dashed;
}

JavaScript

var drawRed = function (x, y) {
    ctx.beginPath();
    ctx.strokeStyle = '#ff0000';
    ctx.arc(x, y, 2, 0, Math.PI * 2, false);
    ctx.stroke();
};

var drawBlack = function (x, y) {
    ctx.strokeStyle = '#000000';
    ctx.beginPath();
    ctx.arc(mid[0], mid[1], 2, 0, Math.PI * 2, false);
    ctx.stroke();
};
var Point(a){
    var p = Object.create(null);
    p.x = a[0];
    p.y =a[1];
    p.add = function(b){this.x +=b.x;
                        this.y +=b.y;return this;}
    p.sub = function(b){this.x -=b.x;
                        this.y -=b.y;return this;}
    p.midpoint = function(b){return Point([(this.x+b.x)/2,(this.y+b.y)/2]);};
    return p;
}
var line = function(a,b){
    var dx = a.x-b.x  
};
    
var canvas = document.getElementsByTagName('canvas')[0],
    ctx = canvas.getContext('2d'),
    resize = function () {
        var
        s = getComputedStyle(document.body);
        canvas.width = parseInt(s.width);
        canvas.height = parseInt(s.height);
    },
    points = [],
    count = 4;
addEventListener('resize', resize);
resize();
while (count--) {
    points.push([(Math.random() * canvas.width) | 0]);
    points[points.length - 1].push((Math.random() * canvas.height) | 0);
}
console.log(points);
points.forEach(function (e) {
    
    points.forEach(function (f) {
        if (f !== e) {
            e[

            }
        });
    });
points.forEach(function (e) {
    drawBlack(e[0],e[1]);

});