Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 141307

Positioning text in HTML5 canvas

$
0
0

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>

Viewing all articles
Browse latest Browse all 141307

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>