Is there a way to display a popup message when clicking on a circle in the array to see the number of rows and columns that circle is from the starting point (1,1)?
I'm looking for assistance with implementing this feature.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gCanvasElement = ctx;
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,800,600);
// Positions are hardcoded to make sure that circle starts from the right place
var startX = 55;
var startY = 55;
console.clear();
for(var i=1;i<=8;i++){
console.group(i);
for(var j=1;j<=i;j++){
ctx.beginPath();
ctx.strokeStyle='green';
//radius is hardcoded to 30 for testing purpose
ctx.arc(startX*j + (j-1)*10,startY*i + (i-1)*10,30,0,2*Math.PI);
ctx.stroke();
//console log
console.group(j);
console.log(startX*j + (j-1)*10);
console.log(startY*i + (i-1)*10);
console.groupEnd(j);
}
console.groupEnd(i);
}