title: What does the Y coordinate define when calling Canvas​Rendering​Context2D.fill​Text?
body: <p>I am looking at <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText" rel="nofollow noreferrer">this page on MDN</a>.</p>
  
  <p>In the syntax section it says:</p>
  
  <blockquote>
    <p>y ... The y-axis coordinate of the point at which to begin drawing the text, in pixels.</p>
  </blockquote>
  
  <p>I copied their example from the page and set <code>y</code> to <code>0</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  ctx.font = '50px serif';
  ctx.fillText('Hello world', 0, 0);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="400" height="150" style="border: 1px solid black"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see when running the snippet, nothing is visible on the canvas. So <code>x</code> does define the left coordinate, but <code>y</code> does not define the top coordinate for drawing the text. What does <code>y</code> define? Is it the baseline?</p>