JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            <!--canvas to draw dots-->
            <canvas id="myCanvas" width="400" height="300" onclick="drawDot(event)"></canvas>
        </div>
    </div>
</div>

<div class="container">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default" id="solve">Draw Polygon</button>
        <button type="button" class="btn btn-default" id="reset">Reset</button>
    </div>
</div><!-- /.container -->

CSS

#myCanvas {
    border: 1px solid #000;
}

JavaScript

/**
 * Created by knguyen on 4/13/2015.
 */

//dots coordinate container
var pointsArray = [];

//the Point class
function Point(x, y) {
    //member variables
    this.x = x;
    this.y = y;

    //public methods
    this.GetDistance = function(that) {
        var dX = that.x - this.x;
        var dY = that.y - this.y;
        return Math.sqrt((dX*dX) + (dY*dY));
    }

    this.GetSlope = function(that) {
        var dX = that.x - this.x;
        var dY = that.y - this.y;
        return dY/dX;
    }
}

//globals for the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

/// <summary>
/// Draws the dot and call the function to store the coordinate.
/// </summary>
/// <param name="e">TThe click event object</param>
function drawDot(e) {
    var position = getMousePosition(canvas, e);
    posx = position.x;
    posy = position.y;

    //keep a running list of coordinates
    storeCoordinate(posx, posy);

    //draw the dot
    context.fillStyle = "#F00";
    context.fillRect(posx, posy, 6, 6); //avoid drawing circles as it is more resource intensive
}

/// <summary>
/// Get the mouse position of the click relative to the canvas.
/// </summary>
/// <param name="c">The canvas object</param>
/// <param name="e">The click event object</param>
/// <returns>An object containing and 'x' and 'y' coordinate.</returns>
function getMousePosition(c, e) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: e.clientX - rect.left, y: e.clientY - rect.top
    };
}

/// <summary>
/// Store the x and y coordinates in the myDotsArray object.
/// </summary>
/// <param name="xVal">The 'x' value of the coordinate</param>
/// <param name="yVal">The 'y' value of the coordinate</param>
function storeCoordinate(xVal, yVal) {
    //var thisClicksPoint = new Point(xVal, yVal);
    pointsArray.push(new Point(xVal, yVal));
}

/**
 * Created by knguyen on 4/13/2015.
 */

$("#solve").click(
    function() {
       ...