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 = "#aaa";
        ctx.strokeWidth = 1;

        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 Slope*(X - Focus.X) + Focus.Y;
        };
        
        var FurtherPoint = {};
        FurtherPoint.X = Point.X - Radius,
        FurtherPoint.Y = LineEq(FurtherPoint.X);
        
        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(Point.X + Radius,Point.Y + Radius);
        ctx.lineTo(
            FurtherPoint.X,
            FurtherPoint.Y
        );
        ctx.stroke();
        
        ctx.beginPath();
        //ctx.moveTo(Rect[0].X, Rect[0].Y);
        //ctx.lineTo(Rect[1].X, Rect[1].Y);
        //ctx.lineTo(Rect[2].X, Rect[2].Y);
        //ctx.lineTo(Rect[3].X, Rect[3].Y);
        //ctx.lineTo(Rect[0].X, Rect[0].Y);
        ctx.fill();
        
       
    });
});

var Points = [{
    "X": 807,
    "Y": 260},
{
    "X": 821,
    "Y": 272},
{
    "X": 835,
    "Y": 284},
{
    "X": 849,
   ...