JavaScript 페인팅 앱의 요소를 기준으로 마우스 위치를 어떻게 얻나요?

<code class="js">document.getElementById('clickme').onclick = function(e) {
  // e = Mouse click event
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; // x position within the element
  var y = e.clientY - rect.top; // y position within the element
  console.log("Left? : " + x + " ; Top? : " + y + ".");
}</code>

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

<code class="css">#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}</code>