title: Positioning text in HTML5 canvas
body: <p>I'm trying to place text inside of a <code>canvas</code> element. In this example, I want to put 48px high text inside of a 64px high canvas. The text should therefore take up 3/4 of the height of the canvas. However, in everything I've tried, the text only occupies the upper part of the canvas and get squished into that space the larger I make it.</p>
  
  <p>If I start at 0, 0; nothing appears in the canvas, so I moved to 0, 64 to start. This places the text inside but the scaling is off as mentioned before. If I go all the way to 0, 128 - which doesn't even make sense to me - the text is moved to the bottom of the canvas but still squished flat. There's definitely something about positioning here that I don't understand. How can I get text in the canvas that is the height I specify?</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>let canvas = document.getElementById("cv");
  let ctx = canvas.getContext("2d");
  
  ctx.font = "48px Arial";
  ctx.fillText("Hello World", 0, 64);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="cv" style="border: 1px solid black; height: 64px; width: 300px;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>