I'm trying to place text inside of a canvas
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.
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?
let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");
ctx.font = "48px Arial";
ctx.fillText("Hello World", 0, 64);
<canvas id="cv" style="border: 1px solid black; height: 64px; width: 300px;"></canvas>