so I am trying to make this Japanese game called GO and I need to place circles in the edges like this. I've made the grid now need to place the circles in there. I 'v tried different things like using the arc in canvas with mouse position and placing it but it isn't working something else I tried is to make an array that checks where the lines cross but it still didn't do anything. I'm not sure what's wrong so hope you guys could help me find a way to place the circles on the board every time I click the mouse. I've deleted the things that didn't work and this is my code now:
const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")
//canvas.style.border = "1px solid black"
let w = ctx.canvas.width
let h = ctx.canvas.height
goBoard = []
goCheckBoard = []
function drawGrid(w, h) {
for (x = 0; x <= w; x += 40) {
for (y = 0; y <= h; y += 40) {
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.stroke();
ctx.moveTo(0, y);
ctx.lineTo(w, y);
ctx.stroke();
}
}
}
drawGrid(400, 400)
this just makes the grid
one example is this:
mouseClicked = function () {
ctx.beginPath()
ctx.strokeStyle = "black"
ctx.ellipse(mouseX, mouseY, 20, 20);
ctx.stroke()
};
another:
if (mouseIsPressed) {
ellipse(200, 200, 180, 180);
}
im not sure that is the correct way to do it
I think this should work:
function rtn(n, r){
return Math.round(n/r)*r;
}
canvas.onclick = function(event){
ctx.beginPath();
ctx.arc(rtn(event.clientX, 40), rtn(event.clientY, 40), 180, 180, 0, Math.PI * 2);
ctx.fillStyle = "black";
ctx.fill();
};
ClientX and ClientY have documentation here