15

I know I can use context.measureText to get the width of some text if it would now be rendered on the canvas. Is there a way to do the same but get the text's height?

just a thought to myself - maybe I can rotate the text 90Deg and then test for the width ?...

epeleg
  • 10,347
  • 17
  • 101
  • 151
  • 3
    Look here for a good answer: http://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas – Garrett Vlieger Jul 12 '12 at 12:50
  • I posted a solution with a simple function here - http://stackoverflow.com/a/36729322/1828637 – Noitidart Apr 19 '16 at 21:07
  • Possible duplicate of [How can you find the height of text on an HTML canvas?](https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas) – Neonit Apr 04 '19 at 08:50

3 Answers3

6

This SO answer is probably over-engineered for your needs How can you find the height of text on an HTML canvas?

I prefer something a little more simple:

var text = "Hello World";
var font = "Serif";
var size = "16";
var bold = false;

var div = document.createElement("div");
    div.innerHTML = text;
    div.style.position = 'absolute';
    div.style.top  = '-9999px';
    div.style.left = '-9999px';
    div.style.fontFamily = font;
    div.style.fontWeight = bold ? 'bold' : 'normal';
    div.style.fontSize = size + 'pt'; // or 'px'
document.body.appendChild(div);
var size = [ div.offsetWidth, div.offsetHeight ];
document.body.removeChild(div);

// Output
console.log( size );
var pre = document.getElementById( "output" );
if( pre )
    pre.innerHTML = size;
<pre id="output"></pre>

Reference: http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html

Community
  • 1
  • 1
Michaelangel007
  • 2,798
  • 1
  • 25
  • 23
  • 3
    Where is the canvas? – ceving May 23 '19 at 09:59
  • You don't _need_ a canvas for metrics. – Michaelangel007 May 24 '19 at 14:01
  • You do need a canvas when the question is about canvas. – Jorge Fuentes González Nov 23 '20 at 13:26
  • 16px font in a `
    ` is the same size as 16px font in a `` assuming the canvas hasn't been scaled so, no, the canvas isn't needed in this answer. @JorgeFuentesGonzález
     – Jesse Strickland Sep 23 '21 at 22:19
  • @JesseStrickland First: canvas `measureText` is sub-pixel accurate, not like `offsetWidth`, so is not the exact same result. Second: Chrome is not 100% browsers. Some time ago Microsoft Edge had some problems with this. I guess that now being Chromium has the exact same result as Chrome, but still is not the same result because of sub-pixel precission (and you don't know how all browsers implement this, so if you are going to work with canvas, measure text with canvas. That's an easy "good practice" rule to avoid implementation problems). – Jorge Fuentes González Sep 24 '21 at 14:22
5

I had the same issue and what I found is this. Get the font size from you string. I do not know why, but it only works when you set the proprety in PT, not PX.

ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.

Then take the value from it.

var txtHeight = parseInt(ctx.font);

Now you have the height for your text. Like I said, in my side I had to set the size in PT as PX

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Manuel Choucino
  • 667
  • 4
  • 6
1

You can set the font size of your canvas in pixels which you SHOULD then be able to use as the height of your text box. However, when I came to do this I found I needed to add approximately 50% to the pixel height to get an accurate value: 

var textHeight = fontSize * 1.5;

If that's not good enough for you, there are a couple of pretty full-blown solutions outlined here, one of which uses the getImageData method to count the number of vertical pixels.

Community
  • 1
  • 1
net.uk.sweet
  • 12,444
  • 2
  • 24
  • 42
  • 2
    This is dependent on font type and it assumes there are no extremely interesting characters. – Parris Oct 02 '14 at 18:53