title: How to make circle on spesific places with mouse pos in canvas grid
body: <p>so I am trying to make this Japanese game called GO and I need to place circles in the edges like <a href="https://i.stack.imgur.com/v7Uam.jpg" rel="nofollow noreferrer">this</a>. 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:</p>
  <pre><code>const canvas = document.getElementById(&quot;myCanvas&quot;)
  const ctx = canvas.getContext(&quot;2d&quot;)
  //canvas.style.border = &quot;1px solid black&quot;
  let w = ctx.canvas.width
  let h = ctx.canvas.height
  
  
  goBoard = []
  goCheckBoard = []
  
  function drawGrid(w, h) {
  
      for (x = 0; x &lt;= w; x += 40) {
          for (y = 0; y &lt;= 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)
  </code></pre>
  <p>this just makes the grid</p>
  <p>one example is this:</p>
  <pre><code>mouseClicked = function () {
      ctx.beginPath()
      ctx.strokeStyle = &quot;black&quot;
      ctx.ellipse(mouseX, mouseY, 20, 20);
      ctx.stroke()
  };
  </code></pre>
  <p>another:</p>
  <pre><code>if (mouseIsPressed) {
      ellipse(200, 200, 180, 180);
  }
  </code></pre>
  <p>im not sure that is the correct way to do it</p>