JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas">
    <div class="draggable" id="Point0">Point0</div>
</div>
<div id="results">coordination</div>
<input type='button' id="btn_add" value='Add box' />
<input type='button' id="btn_getCoord" value="Get Coornination" />
<input type='button' id="btn_erase" value='Erase All' />

CSS

.draggable {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: green;
    cursor: move;
}
.canvas {
    width: 500px;
    height: 400px;
    background: #ccc;
    position: relative;
    margin: 2em auto;
}
#results {
    text-align: center;
}

JavaScript

var xmlHttpRequest;

    function PostData() {            

        //create XMLHttpRequest object
        xmlHttpRequest = (window.XMLHttpRequest) ?  new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

        //If the browser doesn't support Ajax, exit now
        if (xmlHttpRequest == null)
            return;

        //Prepare your data points so they are in the format X1-Y1-X2-Y2-X3-Y3
        pointData = "21-12-51-23-54-125-154-315-245-21"

        //Initiate the XMLHttpRequest object
        xmlHttpRequest.open("GET", "http://foo.com/Page.aspx?Points=" + pointData, true);                       

        //Send the Ajax request to the server with the GET data
        xmlHttpRequest.send(null);
    }