title: Math.Pow inside Math.Sqrt - I don't understand this code
body: <p>I'm using this code I took from somewhere, for learning purposes. I'm trying to break it down and understand how it does what it does, if you could help me grasp it better.</p>
  
  <p>This function returns the distance between mouse and the respective element.</p>
  
  <pre><code>function calculateDistance(elem, mouseX, mouseY) {
      return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
  }
  </code></pre>
  
  <p>It returns a positive number, calculating only the pixels inbetween mouse and element.</p>
  
  <p>Stripping it down and leaving only the Math.floor. I don't know why without the math.sqrt(math.pow...) I get negative values depending on mouse position relaative to the element -> left(-x), right(x), above(-y), below(y) the element </p>
  
  <p>and also get a different center for the element.</p>
  
  <pre><code>function calculateDistance(elem, mouseX, mouseY) {
      return Math.floor(mouseX - (elem.offset().left+(elem.width()/2)) + mouseY - (elem.offset().top+(elem.height()/2)));
  }
  </code></pre>
  
  <p>I know what Math.pow and sqrt do on their own. I'm not seeing how they're finding the center of the element as I thought that <code>elem.offset().left+(elem.width()/2)</code> was doing just that horizontally meanwhile <code>elem.offset().top+(elem.height()/2)</code> did it vertically.</p>