JSFiddle - React, Tailwind, and code Playground

by nmartin413

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<canvas width="1000" height="1000"></canvas>

CSS

canvas {width:100%}

JavaScript

$(function() {
    var Canvas = $('canvas')[0];

    _.each(Points, function(Point) {
        var ctx = Canvas.getContext('2d');
        var Angle = Math.PI;

        var Focus = {
            X: 500,
            Y: 1000
        };

        ctx.fillStyle = "#ED1B24";
        ctx.strokeStyle = "#ED1B24";
        ctx.lineWidth = 30;

        var Radius = 10;

        var Rect = [
        {
            X: (Point.X - Radius / 2),
            Y: (Point.Y - Radius / 2)},
        {
            X: (Point.X + Radius / 2),
            Y: (Point.Y - Radius / 2)},
        {
            X: (Point.X + Radius / 2),
            Y: (Point.Y + Radius / 2)},
        {
            X: (Point.X - Radius / 2),
            Y: (Point.Y + Radius / 2)
        }
        ];

        var index = 0;
      
        _.each(Rect, function(V) {
            
        });
        
        var Slope = (Focus.Y - Point.Y) / (Focus.X - Point.X);

        var LineEq = function (X) {
            return Math.abs(Slope*(X - Focus.X) + Focus.Y);
        };
        
        var FurtherPoint = {};
        FurtherPoint.X = Point.X - Radius,
        FurtherPoint.Y = LineEq(FurtherPoint.X);
        
        if(FurtherPoint.Y > (Point.Y + Radius*2))
            FurtherPoint.Y = Point.Y + Radius*2;
        
        console.log(FurtherPoint.Y);
        
        ctx.beginPath();
        //ctx.moveTo(Focus.X, Focus.Y);
        //ctx.lineTo(Point.X, Point.Y);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(Point.X,Point.Y);
        ctx.lineTo(FurtherPoint.X,FurtherPoint.Y);
        //ctx.lineTo(FurtherPoint.X+Radius,FurtherPoint.Y+Radius);
        ctx.stroke();
        
       
    });
});

var Points = [{
    "X": 807,
    "Y": 260},
{
    "X": 821,
    "Y": 272},
{
    "X": 835,
    "Y": 284},
{
    "X": 849,
    "Y": 297},
{
    "X": 863,
    "Y": 310},
{
    "X": 876,
    "Y": 323},
{
    "X": 889,
    "Y": 337},
{
    "X": 902,
    "Y": 351},
{
    "X": 913,
    "Y": 367},
{
    "X":...