JSFiddle - React, Tailwind, and code Playground

by nmartin413

HTML

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

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";

    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 dx2 = Focus.X - V.X;
        var dy2 = Focus.Y - V.Y;

        var dx2_ = dx2 * Math.cos(Angle) - dy2 * Math.sin(Angle);
        var dy2_ = dy2 * Math.sin(Angle) + dy2 * Math.cos(Angle);

        V.X = Math.abs(dx2_ + V.X);
        V.Y = Math.abs(dy2_ + V.Y); 

        Rect[index] = V;
        index++;
    });
    
    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 =...