let canvas = document.getElementsByTagName('canvas')[0],
    ctx = canvas.getContext('2d');

let points = [];

let randInt = function(min, max) {
    if (arguments.length == 1) {
        max = arguments[0];
        min = 0;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

let drawPoints = () => {
    canvas.width = canvas.width;
    for (let point of points) {
        ctx.beginPath();
        ctx.arc(point[0], point[1], 5, 0, 2 * Math.PI);
        ctx.fill();
        console.log(point);
    }
}

let addingDataPointsManually = false,
    addingCentroidsManually = false;

let buttonAddDataPointsManually = document.getElementById('add-data-points-manually'),
    buttonAddCentroidsManually = document.getElementById('add-centroids-manually');

let toggleButtonText = function(button) {
    let currentText = button.innerHTML;
    button.innerHTML = button.getAttribute('data-toggle');
    button.setAttribute('data-toggle', currentText);
}

let updateCanvasStyles = function() {
    if (addingDataPointsManually || addingCentroidsManually) {
        canvas.classList.add('canvas-picking-active');
    } else {
        canvas.classList.remove('canvas-picking-active');
    }
}

let toggleAddingDataPointsManually = function() {
    if (addingCentroidsManually) {
        toggleAddingCentroidsManually();
    }
    addingDataPointsManually = !addingDataPointsManually;
    toggleButtonText(buttonAddDataPointsManually);
    updateCanvasStyles();
}

let toggleAddingCentroidsManually = function() {
    if (addingDataPointsManually) {
        toggleAddingDataPointsManually();
    }
    addingCentroidsManually = !addingCentroidsManually;
    toggleButtonText(buttonAddCentroidsManually);
    updateCanvasStyles();
}

buttonAddDataPointsManually.addEventListener('click', toggleAddingDataPointsManually, false);
buttonAddCentroidsManually.addEventListener('click', toggleAddingCentroidsManually, false);

@@ -86,25 +86,29 @@
 '2d');%0A%0Alet 
-p
+dataP
 oints = %5B%5D;%0A
@@ -309,89 +309,30 @@
 oint
-s
  = 
-() =%3E %7B%0A    canvas.width = canvas.width;%0A    for (let point of points) %7B%0A    
+function(%5Bx, y%5D) %7B%0A
     
@@ -356,20 +356,16 @@
     
- 
-   
 ctx.arc(
 poin
@@ -364,26 +364,12 @@
 arc(
-point%5B0%5D, point%5B1%5D
+x, y
 , 5,
@@ -386,20 +386,16 @@
 th.PI);%0A
-    
     ctx.
@@ -406,27 +406,122 @@
 ();%0A
-        console.log
+%7D%0A%0Alet drawPoints = () =%3E %7B%0A    canvas.width = canvas.width;%0A    for (let point of dataPoints) %7B%0A        drawPoint
 (poi
@@ -1923,24 +1923,434 @@
 troidsManually, false);%0A
+%0Alet pointClickedOnCanvas = function(e) %7B%0A    let canvasRect = canvas.getBoundingClientRect();%0A    return %5B%0A        e.clientX - canvasRect.left - 1,%0A        e.clientY - canvasRect.top - 1%0A    %5D;%0A%7D;%0A%0Acanvas.addEventListener('click', function(e) %7B%0A    if (addingDataPointsManually) %7B%0A        let newPoint = pointClickedOnCanvas(e);%0A        dataPoints.push(newPoint)%0A        drawPoint(newPoint);%0A    %7D%0A%7D, false);%0A

Add creation of new data points on canvas click