title: Using event.client (x and y) to use for mouse coordinates to spawn a shape in HTML/JS
body: <p>So I am trying to make a program where I click on the canvas it creates a shape in the position that I click. I am having trouble grabbing the mouse x and y coordinates and using for the x and y coordinates of my shape when I click</p>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;canvas id = "drawBoard" height = '600' width = '1330' style="border:1px solid black";&gt;&lt;/canvas&gt;
  &lt;head&gt;
      &lt;div id = "js"&gt;
      &lt;script src = "functions.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
      &lt;div id = "css"&gt;
     &lt;link rel = stylesheet type = "text/css" href = "main.css"&gt;
      &lt;/div&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt; Shape Drawer &lt;/title&gt;
  
    &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="log"&gt;&lt;/div&gt;
  
  &lt;script id = "jquery"&gt;
  $( document ).on( "mousemove", function( event ) {
    $( "#log" ).text( "Coordinates: " + event.pageX + " , " + event.pageY );
  });
  
      &lt;/script&gt;
   &lt;button id = "circle" onclick = "circleTrue()"&gt; Circle &lt;/button&gt;
   &lt;button id = "square" onclick = "squareTrue()"&gt; Square &lt;/button&gt;
   &lt;button id = "triangle" onclick = "triangleTrue()"&gt; Triangle &lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JavaScript Code:</p>
  
  <pre><code>var shape;
  var circle = false;
  var square = true;
  var triangle = false;
  
  function getCoord(event){
  var x = event.clientX;
  var y = event.clientY;
  }
  
  document.getElementById("drawBoard");
  
  
  
  document.getElementById('drawBoard').onclick = function() {clickSpawn()};
  
  function clickSpawn{
    fillRect(x, y, 50, 50 );
    fillStyle = "black";
  }
  
  function circleTrue() {
      circle = true;
      square = false;
      triangle = false;
  }
  
  function squareTrue() {
      circle = false;
      square = true;
      triangle = false;
  }
  
  function triangleTrue() {
      circle = false;
      square = false;
      triangle = true;
  }
  </code></pre>
  
  <p>I am trying to figure out if it is possible to use my mouse x and y coordinates for a spawn location for my shape. Any help would be appreciated. Thanks.</p>