title: Place image on canvas at same x,y position as mouse onclick
body: <p>I'm trying to make a web app that lets the user insert small images of characters on an html canvas. The plan is to have the user click a button on a virtual keyboard, and then click on the canvas to have the corresponding character appear wherever the user clicked. Right now I'm just trying to get one image to appear on the canvas when clicked, but so far it isn't doing anything. Here's the code I have now, which is embedded in the html file.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              var mathCanvas = document.getElementById("matharea");
              var ctx = mathCanvas.getContext("2d");
              var el = mathCanvas;
              var xPos = 0;
              var yPos = 0;
              while(el &amp;&amp; !isNaN(el.offsetLeft) &amp;&amp; !isNaN(el.offsetTop)){
                  xPos += el.offsetLeft - el.scrollLeft;
                  yPos += el.offsetTop - el.scrollTop;
                  el = el.parentNode;
              }
              var img = new Image();
              img.src = "five.png";
              mathCanvas.onclick = function(event){
                  var x = event.clientX - xPos;
                  var y = event.clientY - yPos;
                  ctx.drawImage(img,x,y);
              };
  &lt;/script&gt;
  </code></pre>
  
  <p>I've tested the onclick event, and it returns coords, but the image won't appear. What's going wrong here?</p>