Here is JS code to show random points on a canvas:
var myCanvas = document.getElementById("showCanvas");
var myContext = myCanvas.getContext("2d");
randomPoints(myContext, 4);
function randomPoints(canvas, count) {
for (var i = 0; i < count; i++) {
var x = Math.floor(Math.random() * 600);
var y = Math.floor(Math.random() * 400);
var r = 5;
canvas.arc(x, y, r, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.fill();
}
}<canvas id="showCanvas" width="600%" height="400%" style="border:2px solid #000000;">
Your browser does not support the canvas element
</canvas>It works fine, but can't find a way to connect these points in a linear format, e.g. a to d and not a to b, a to c and a to d like it shows below. I need help!
$('.drawLines').click(function() {
myContext.beginPath();
// wish there was something I could do here if necessary...
myContext.stroke();
});What am I missing?