title: HTML5 Canvas: fontBoundingBoxAscent vs. actualBoundingBoxAscent
body: <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics" rel="nofollow noreferrer">TextMetrics API</a> returns a few fields with similar names:</p>
  
  <ul>
  <li><code>fontBoundingBoxAscent</code> vs. <code>actualBoundingBoxAscent</code></li>
  <li><code>fontBoundingBoxDescent</code> vs. <code>actualBoundingBoxDescent</code></li>
  </ul>
  
  <p>The MDN docs is not very clear and does not provide a visual. What is the difference between them?</p>
  
  <p>Also, as a follow-up, how can I calculate the height of the text from these values?</p>