title: How do I capture the onclick event called in HTML?
body: <p>So, I have an <code>&lt;img&gt;</code> tag that has an <code>onclick</code> attribute.  The <code>onclick</code> calls a function called <code>analyze(this)</code>, with <code>this</code> being the image.</p>
  
  <p>The <code>analyze</code> function does some things to the image that aren't entirely relevant, except for the fact that it draws it onto the <code>&lt;canvas&gt;</code> element (using the <code>drawImage</code> function).</p>
  
  <p>But now, I want to also pick the color I just clicked on in the image.  I am currently using the method answered here (the answer with 70+ votes, not the chosen one): <a href="https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element">How do I get the coordinates of a mouse click on a canvas element?</a></p>
  
  <p>But, I think I might be doing this wrong.  I have the image drawn and my functions called (and those all work), but the color picking part isn't being called.  I think that this is because I didn't actually capture the event.  This is generally how my code looks:</p>
  
  <pre><code>&lt;img onclick="javascript:analyze(this);" /&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>function analyze(img_elem) {
      // This is getting the canvas from the page and the image in it
      var canvaselement = document.getElementById('canvas').getContext('2d'),
          img = new Image();
  
      img.onload = function () {
          canvaselement.drawImage(img, 0, 0, 250, 250);
  
          ...
  
          canvaselement.onClick = function () {
              var coords = canvaselement.relMouseCoords(event);
              pick(img, canvaselement, coords); // pass in coordinates            
          }
  
      }
  
      img.src = img_elem.src;
  }
  
  function relMouseCoords(event) {
      var totalOffsetX = 0;
      var totalOffsetY = 0;
      var canvasX = 0;
      var canvasY = 0;
      var currentElement = this;
  
      do {
          totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
          totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
      }
      while (currentElement = currentElement.offsetParent)
  
      canvasX = event.pageX - totalOffsetX;
      canvasY = event.pageY - totalOffsetY;
  
      return {
          x: canvasX,
          y: canvasY
      }
  }
  
  function pick(img, canvaselement, coords) {
      var pickedColor = "";
      canvaselement.drawImage(img, 0, 0, 250, 250);
  
      xx = coords.x;
      yy = coords.y;
      var imgData = canvas.getImageData(xx, yy, 1, 1).data;
  
      pickedColor = rgbToHex(imgData);
  
      //alert(pickedColor);
      return pickedColor;
  }
  </code></pre>
  
  <p>So, the code never gets to the <code>pick</code> function.  I have a feeling that it's because I didn't actually capture the <code>onclick</code> event.  I'm also not even sure if this is the right way to get the coordinates on the canvas, I'm just sort of hoping that I even get to that part of the debugging process at this point.</p>
  
  <p>Thanks for your help!</p>