así que estoy tratando de hacer este juego llamado GO y necesito colocar círculos en los bordes como este . Hice la cuadrícula y ahora necesito colocar los círculos allí. Intenté diferentes cosas, como usar el arco en el lienzo con la posición del mouse y colocarlo, pero no funciona. Otra cosa que intenté es hacer una matriz que verifique dónde se cruzan las líneas, pero aún así no hizo nada. pero puede que lo haya hecho mal. No estoy seguro de qué está mal, así que espero que me ayuden a encontrar una manera de colocar los círculos en el tablero cada vez que hago clic con el mouse. Eliminé las cosas que no funcionaron y este es mi código ahora:

 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)

esto solo hace la grilla

un ejemplo que he probado es este:

 mouseClicked = function () { ctx.beginPath() ctx.strokeStyle = "black" ctx.ellipse(mouseX, mouseY, 20, 20); ctx.stroke() };

otro:

 function rtn(n, r){ return Math.round(n/r)*r; } canvas.onclick = function(event){ ellipse(rtn(event.clientX, 40), rtn(event.clientY, 40), 180, 180); };

no estoy seguro si esa es la forma correcta de hacerlo

tal vez haga una matriz de todos los lugares posibles para colocar el círculo, pero no estoy seguro de cómo

aquí hay un violín si quieres probarlo https://jsfiddle.net/pwe0vx7o/