title: Get the mouse coordinates when clicking on canvas
body: <p>A common question, but I still need help. I'm trying to get and store the mouse coordinates when someone clicks within the canvas. </p>
  
  <p>my HTML</p>
  
  <pre><code>&lt;canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick = "storeGuess(event)"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>and my javascript</p>
  
  <pre><code>//setup canvas
  var canvasSetup = document.getElementById("puppyCanvas");
  var ctx = canvasSetup.getContext("2d");
  
  guessX = 0;//stores user's click on canvas
   guessY = 0;//stores user's click on canvas
  
  function storeGuess(event){
      var x = event.clientX - ctx.canvas.offsetLeft;
      var y = event.clientY - ctx.canvas.offsetTop;
      /*guessX = x;
      guessY = y;*/
  
  
      console.log("x coords:" + x + ", y coords" + y);
  </code></pre>
  
  <p>I've read loads of forums, w3schools, and videos on this. I'm close to figuring it out, but I'm missing something. I can get the coordinates of the page if I delete the ctx.canvas.offsetLeft and ctx.canvas.offsetTop. But i need to incorporate those somehow to get the coordinates of the canvas, and then store then into the variables guessX and guessY.</p>