I know this is an old thread but I'd like to suggest using an array of objects rather than an array of arrays. I think it make the code simpler to understand and update.
// Use meaningful variable names like 'points',
// anything better than a bad pirate joke, 'arr'!
var points = [];
// Create an object literal, then add it to the array
var point = {x: 0, y: 0};
points.push(point);
// Create and add the object to the array in 1 line
points.push({x:5, y:5});
// Create the object from local variables
var x = 10;
var y = 8;
points.push({x, y});
// Ask the user for a point too
var response = prompt("Please enter a coordinate point. Example: 3,8");
var coords = response.split(",").map(Number);
points.push({x: coords[0], y: coords[1]});
// Show the results
var canvas = document.getElementById('graph');
var painter = canvas.getContext("2d");
var width = canvas.width, height = canvas.height;
var scale = 10, radius = 3.5, deg0 = 0, deg360 = 2 * Math.PI;
painter.beginPath();
for (var point of points) {
var x = point.x * scale + scale;
var y = height - point.y * scale - scale;
painter.moveTo(x + radius, y);
painter.arc(x, y, radius, deg0, deg360);
painter.fillText(`${point.x}, ${point.y}`, x + radius + 1, y + radius + 1);
}
painter.stroke();<canvas id="graph" width="150" height="150" style="border: 1px solid red;"></canvas>