JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="400"></canvas>

JavaScript

"use strict";
var canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d'),
    north = {
        x: 200,
        y: 50
    },
    east = {
        x: 350,
        y: 150
    },
    south = {
        x: 200,
        y: 250
    },
    west = {
        x: 100,
        y: 150
    };

// Print the coordinates, handy for visualizing
ctx.fillText('N: ' + north.x + '/' + north.y, north.x - 30, north.y - 2);
ctx.fillText('E: ' + east.x + '/' + east.y, east.x - 30, east.y - 2);
ctx.fillText('S: ' + south.x + '/' + south.y, south.x - 30, south.y - 2);
ctx.fillText('W: ' + west.x + '/' + west.y, west.x - 30, west.y - 2);

// Straight Lines, handy for visualizing
ctx.beginPath();

ctx.moveTo(north.x, north.y);

ctx.lineTo(east.x, east.y);
ctx.lineTo(south.x, south.y);
ctx.lineTo(west.x, west.y);
ctx.lineTo(north.x, north.y);

ctx.strokeStyle = '#fcc';
ctx.stroke();