title: How to get the coordinates of click/tap on canvas in Polymer/WebComponent (when inside scrolled container)
body: <p>I was aware of the usual method for finding the click position relative to the canvas, as has been <a href="https://stackoverflow.com/questions/14416930/how-to-get-the-coordinates-clicked-on-an-html5-canvas">documented</a> <a href="https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element">before</a>, which in brief is:</p>
  
  <ol>
  <li>Grab <code>event.pageX</code> and <code>event.pageY</code> values to get the position of the click relative to the document</li>
  <li>subtract the x and y coords of the canvas on the page, either with <code>canvasEl.offsetLeft</code>/<code>canvas.El.offsetTop</code> or using jQuery's <code>$(canvasEl).offset()</code>, recursing up through parents if necessary</li>
  <li>Subtract the scroll position of the page and any parent elements, if any.</li>
  </ol>
  
  <p>Sadly, this doesn't work when both the following are true:</p>
  
  <ol>
  <li>The canvas is part of a Polymer (and I assume any other WebComponent solution that polyfills Shadow DOM) element</li>
  <li>The canvas is positioned within a scrolling parent. I did some investigating into this and it looked like Polymer was skipping an ancestor when crossing the shadow boundary, meaning the scroll offset isn't calculated correctly.</li>
  </ol>