title: Image appear at mouse location
body: <p>I am  trying to make an image appear to the location of the mouse coordinates when I click the canvas.</p>
  
  <p>Right now I have it appearing, but I can only figure out how to do it with automatic updating coordinates and the image will follow the mouse after an "onclick".  </p>
  
  <p>I need to make it so the image will just move to the location I click, not follow the cursor.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;style&gt;
        body {
          margin: 0px;
          padding: 0px;
        }
      &lt;/style&gt;
      &lt;/head&gt;
  &lt;title&gt;Click to make a sad face&lt;/title&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;canvas id="myCanvas" width="2000" height="1000", onClick="makeface();"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript"&gt;
  function writeMessage(canvas, message) {
          var ctx = canvas.getContext('2d');
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.font = '18pt Calibri';
          ctx.fillStyle = 'black';
          ctx.fillText(message, 10, 25);
        }
  
  function getMousePos(canvas, evt) {
          var rect = canvas.getBoundingClientRect();
          return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
          };
        }
  
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
  
        canvas.addEventListener('mousemove', function(evt) 
        {
          var mousePos = getMousePos(canvas, evt);
          var message = 'Click to make a face appear at coordinates: ' + mousePos.x + ',' + mousePos.y;
          writeMessage(canvas, message);
        }, false);
  
        function makeface() 
        { 
         canvas.addEventListener('mousemove', function(evt) 
        {
          var mousePos2 = getMousePos(canvas, evt);
          var headx = mousePos2.x;
          var heady = mousePos2.y;
          var message = 'You made the face appear, you are currently at coordinates: ' + mousePos2.x + ',' + mousePos2.y;
          writeMessage(canvas, message);
          var headrad = 50;
          var smileoffsetx=0;
          var frownoffsety = 33;
          var smilerad=20;
          var eyeoffsety = -10;
          var lefteyeoffsetx = -15;
          var righteyeoffsetx = -lefteyeoffsetx;
          var eyerad = 8;
  
          ctx.strokeStyle="blue";
          ctx.lineWidth = 5;
          ctx.beginPath();
          ctx.arc(headx,heady,headrad,0,2*Math.PI,true);
          ctx.closePath();
          ctx.stroke();
          ctx.beginPath()
          ctx.arc(headx+smileoffsetx,heady+frownoffsety,smilerad,-.20*Math.PI,-.80*Math.PI,true);
          ctx.stroke();
              ctx.beginPath()
              ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true);
                ctx.fillStyle="blue";
          ctx.fill();
          ctx.beginPath()
                ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true);
          ctx.fill();
            }, false);
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>