JSFiddle - React, Tailwind, and code Playground

HTML

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

<style type="text/css">
    #guide{
position:absolute;
    width:50px;
    height:50px;
    top:975px;
    left:475px;
    background-color:blue;
}
  </style>
<div id="guide"></div>

JavaScript

$(document).ready(function() {
    var Canvas = $('canvas')[0];
    var Focus = {
        X: 500,
        Y: 1000
    };
    var f = Focus;
    var angle = 0;
    var Radius = 10;
    _.each(Points, function($Point) {
        var ctx = Canvas.getContext('2d');
        var x = $Point.X;
        var y = $Point.Y;
        var width = Radius;
        var height = Radius;
        var cx = x - 0.5 * width;
        var cy = y - 0.5 * height;
        ctx.save();
        ctx.translate(x,y);
        var angle = (Math.atan2(f.Y-y,f.X-x));
        ctx.rotate(angle);
        ctx.fillStyle = "#ED1B24";
    ctx.fillRect(-Radius/2, -Radius/2, width, height);
        ctx.restore();
    });
});

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": 251,
    "Y": 267},
{
    "X": 238,
    "Y": 280},
{
    "X": 225,
    "Y": 292},
{
    "X": 212,
    "Y": 304},
{
    "X": 199,
    "Y": 317},
{
    "X": 187,
    "Y": 330},
{
    "X": 175,
    "Y": 344},
{
    "X": 163,
    "Y": 357},
{
    "X": 153,
    "Y": 371},
{
    "X": 324,
    "Y": 105},
{
    "X": 611,
    "Y": 69},
{
    "X": 594,
    "Y": 67},
{
    "X": 577,
    "Y": 65},
{
    "X": 559,
    "Y": 64},
{
    "X": 542,
    "Y": 63},
{
    "X": 524,
    "Y": 63},
{
    "X": 507,
    "Y": 64},
{
    "X": 489,
    "Y": 65},
{
    "X": 472,
    "Y": 67},
{
    "X": 746,
    "Y": 106},
{
    "X": 455,
    "Y": 70},
{
    "X": 438,
    "Y": 73},
{
    "X": 309,
    "Y": 111},
{
    "X": 761,
    "Y": 112},
{
    "X": 295,
    "Y": 117},
{
    "X": 775,
    "Y": 119},
{
    "X": 281,
    "Y": 124},
{
    "X": 831,
    "Y": 147},
{
    "X": 225,
    "Y": 155},
{
    "X": 688,
    "Y": 85},
{
    "X": 369,
    "Y": 89},
{
    "X": 702,
    "Y": 90},
{
    "X": 354,
    "Y": 94},
{
   ...