How can you find the height of text on an HTML canvas

Question

The spec has a context measureText text  function that will tell you how much width it would require to print that text  but I can t find a way to find out how tall it is  I know it s based on the font  but I don t know to convert a font string to a text height

User · Answer

First of all  you need to set the height of a font size  and then according to the value of the font height to determine the current height of your text is how much  cross-text lines  of course  the same height of the font need to accumulate  if the text does not exceed the largest text box Height  all show  otherwise  only show the text within the box text  High values need your own definition  The larger the preset height  the greater the height of the text that needs to be displayed and intercepted   After the effect is processed solve   Before the effect is processed  unsolved     AutoWrappedText auto wrap   function ctx  text  maxWidth  maxHeight    var words   text split      var lines       var currentLine   words 0    var total height   0  for  var i   1  i  lt  words length  i          var word   words i       var width   ctx measureText currentLine   word  width      if  width  lt  maxWidth            currentLine    word        else           lines push currentLine           currentLine   word             TODO dynamically get font size         total height    25           if  total height  gt   maxHeight              break                   if  total height   25  lt  maxHeight      lines push currentLine     else     lines lines length - 1              return lines

User · Answer

Isn t the height of the text in pixels equal to the font size  in pts  if you define the font using context font

User · Answer

Here is a simple function  No library needed   I wrote this function to get the top and bottom bounds relative to baseline  If textBaseline is set to alphabetic  What it does is it creates another canvas  and then draws there  and then finds the top most and bottom most non blank pixel  And that is the top and bottom bounds  It returns it as relative  so if height is 20px  and there is nothing below the baseline  then the top bound is -20   You must supply characters to it  Otherwise it will give you 0 height and 0 width  obviously   Usage    alert measureHeight  40px serif   40   rg   height    Here is the function   function measureHeight aFont  aSize  aChars  aOptions              if you do pass aOptions ctx  keep in mind that the ctx properties will be changed and not set back  so you should have a devoted canvas for this        if you dont pass in a width to aOptions  it will return it to you in the return object        the returned width is Math ceil ed     console error  aChars       aChars             var defaultOptions             width  undefined     if you specify a width then i wont have to use measureText to get the width         canAndCtx  undefined     set it to object  can  ctx      if not provided  i will make one         range  3             aOptions range   aOptions range    3     multiples the aSize by this much      if  aChars                      no characters  so obviously everything is 0         return               relativeBot  0              relativeTop  0              height  0              width  0                       otherwise i will get IndexSizeError  Index or size is negative or greater than the allowed amount error somewhere below               validateOptionsObj aOptions  defaultOptions      not needed because all defaults are undefined      var can      var ctx       if   aOptions canAndCtx            can   document createElement  canvas             can mozOpaque    true      improved performanceo on firefox i guess         ctx   can getContext  2d                can style position    absolute              can style zIndex   10000             can style left   0             can style top   0             document body appendChild can         else           can   aOptions canAndCtx can          ctx   aOptions canAndCtx ctx             var w   aOptions width      if   w            ctx textBaseline    alphabetic           ctx textAlign    left            ctx font   aFont          w   ctx measureText aChars  width             w   Math ceil w      needed as i use w in the calc for the loop  it needs to be a whole number         must set width height  as it wont paint outside of the bounds     can width   w      can height   aSize   aOptions range       ctx font   aFont     need to set the  font again  because after changing width height it makes it forget for some reason     ctx textBaseline    alphabetic       ctx textAlign    left         ctx fillStyle    white        console log  w    w        var avgOfRange    aOptions range   1    2      var yBaseline   Math ceil aSize   avgOfRange       console log  yBaseline    yBaseline        ctx fillText aChars  0  yBaseline        var yEnd   aSize   aOptions range       var data   ctx getImageData 0  0  w  yEnd  data         console log  data    data       var botBound   -1      var topBound   -1          measureHeightY      for  y 0  y lt  yEnd  y              for  var x   0  x  lt  w  x    1                var n   4    w   y   x               var r   data n               var g   data n   1               var b   data n   2                  var a   data n   3                if  r g b  gt  0       non black px found                 if  topBound    -1                         topBound   y                                    botBound   y     break measureHeightY     dont break measureHeightY ever  keep going  we till yEnd  so we get proper height for strings like      or     or                     break                                     return           relativeBot  botBound - yBaseline     relative to baseline of 0    bottom most row having non-black         relativeTop  topBound - yBaseline     relative to baseline of 0    top most row having non-black         height   botBound - topBound    1          width  w   EDIT  comma has been added to fix old broken code             relativeBot  relativeTop  and height are the useful things in the return object   Here is example usage    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt Page Title lt  title gt  x000D   lt script gt  x000D  function measureHeight aFont  aSize  aChars  aOptions       x000D      if you do pass aOptions ctx  keep in mind that the ctx properties will be changed and not set back  so you should have a devoted canvas for this x000D      if you dont pass in a width to aOptions  it will return it to you in the return object x000D      the returned width is Math ceil ed x000D   console error  aChars       aChars         x000D   var defaultOptions     x000D    width  undefined     if you specify a width then i wont have to use measureText to get the width x000D    canAndCtx  undefined     set it to object  can  ctx      if not provided  i will make one x000D    range  3 x000D      x000D    x000D   aOptions range   aOptions range    3     multiples the aSize by this much x000D    x000D   if  aChars           x000D       no characters  so obviously everything is 0 x000D    return   x000D     relativeBot  0  x000D     relativeTop  0  x000D     height  0  x000D     width  0 x000D       x000D       otherwise i will get IndexSizeError  Index or size is negative or greater than the allowed amount error somewhere below x000D     x000D    x000D      validateOptionsObj aOptions  defaultOptions      not needed because all defaults are undefined x000D    x000D   var can  x000D   var ctx   x000D   if   aOptions canAndCtx    x000D    can   document createElement  canvas     x000D    can mozOpaque    true      improved performanceo on firefox i guess x000D    ctx   can getContext  2d    x000D     x000D       can style position    absolute   x000D       can style zIndex   10000  x000D       can style left   0  x000D       can style top   0  x000D       document body appendChild can   x000D     else   x000D    can   aOptions canAndCtx can  x000D    ctx   aOptions canAndCtx ctx  x000D     x000D    x000D   var w   aOptions width  x000D   if   w    x000D    ctx textBaseline    alphabetic   x000D    ctx textAlign    left    x000D    ctx font   aFont  x000D    w   ctx measureText aChars  width  x000D     x000D    x000D   w   Math ceil w      needed as i use w in the calc for the loop  it needs to be a whole number x000D    x000D      must set width height  as it wont paint outside of the bounds x000D   can width   w  x000D   can height   aSize   aOptions range  x000D    x000D   ctx font   aFont     need to set the  font again  because after changing width height it makes it forget for some reason x000D   ctx textBaseline    alphabetic   x000D   ctx textAlign    left    x000D    x000D   ctx fillStyle    white   x000D    x000D   console log  w    w   x000D    x000D   var avgOfRange    aOptions range   1    2  x000D   var yBaseline   Math ceil aSize   avgOfRange   x000D   console log  yBaseline    yBaseline   x000D    x000D   ctx fillText aChars  0  yBaseline   x000D    x000D   var yEnd   aSize   aOptions range  x000D    x000D   var data   ctx getImageData 0  0  w  yEnd  data  x000D      console log  data    data  x000D    x000D   var botBound   -1  x000D   var topBound   -1  x000D    x000D      measureHeightY  x000D   for  y 0  y lt  yEnd  y      x000D    for  var x   0  x  lt  w  x    1    x000D     var n   4    w   y   x   x000D     var r   data n   x000D     var g   data n   1   x000D     var b   data n   2   x000D        var a   data n   3   x000D      x000D     if  r g b  gt  0       non black px found x000D      if  topBound    -1     x000D       topBound   y  x000D        x000D      botBound   y     break measureHeightY     dont break measureHeightY ever  keep going  we till yEnd  so we get proper height for strings like      or     or     x000D      break  x000D       x000D      x000D     x000D    x000D   return   x000D    relativeBot  botBound - yBaseline     relative to baseline of 0    bottom most row having non-black x000D    relativeTop  topBound - yBaseline     relative to baseline of 0    top most row having non-black x000D    height   botBound - topBound    1  x000D    width  w x000D      x000D    x000D   x000D   lt  script gt  x000D   lt  head gt  x000D   lt body style  background-color steelblue   gt  x000D   lt input type  button  value  reuse can  onClick  alert measureHeight  40px serif   40   rg    canAndCtx  can document getElementById  can    ctx document getElementById  can   getContext  2d      height   gt  x000D   lt input type  button  value  dont reuse can  onClick  alert measureHeight  40px serif   40   rg   height   gt  x000D   lt canvas id  can  gt  lt  canvas gt  x000D   lt h1 gt This is a Heading lt  h1 gt  x000D   lt p gt This is a paragraph  lt  p gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    The relativeBot and relativeTop are what you see in this image here   https   developer mozilla org en-US docs Web API Canvas API Tutorial Drawing text

User · Answer

Just to add to Daniel s answer  which is great  and absolutely right    version without JQuery   function objOff obj        var currleft   currtop   0      if  obj offsetParent         do   currleft    obj offsetLeft  currtop    obj offsetTop          while  obj   obj offsetParent          else   currleft    obj offsetLeft  currtop    obj offsetTop        return  currleft currtop     function FontMetric fontName fontSize         var text   document createElement  span        text style fontFamily   fontName      text style fontSize   fontSize    px       text innerHTML    ABCjgq            if you will use some weird fonts  like handwriting or symbols  then you need to edit this test string for chars that will have most extreme accend descend values      var block   document createElement  div        block style display    inline-block       block style width    1px       block style height    0px        var div   document createElement  div        div appendChild text       div appendChild block           this test div must be visible otherwise offsetLeft offsetTop will return 0        but still let s try to avoid any potential glitches in various browsers        by making it s height 0px  and overflow hidden     div style height    0px       div style overflow    hidden           I tried without adding it to body - won t work  So we gotta do this one      document body appendChild div        block style verticalAlign    baseline       var bp   objOff block       var tp   objOff text       var taccent   bp 1  - tp 1       block style verticalAlign    bottom       bp   objOff block       tp   objOff text       var theight   bp 1  - tp 1       var tdescent   theight - taccent          now take it off  -      document body removeChild div           return text accent  descent and total height     return  taccent theight tdescent       I ve just tested the code above and works great on latest Chrome  FF and Safari on Mac   EDIT  I have added font size as well and tested with webfont instead of system font - works awesome

User · Answer

I have implemented a nice library for measuring the exact height and width of text using HTML canvas  This should do what you want   https   github com ChrisBellew text-measurer js

User · Answer

As JJ Stiff suggests  you can add your text to a span and then measure the offsetHeight of the span   var d   document createElement  span    d font    20px arial   d textContent    Hello world    document body appendChild d   var emHeight   d offsetHeight  document body removeChild d     As shown on HTML5Rocks

User · Answer

This is madding    The height of the text is the font size   Didn t any of you read the documentation   context font    22px arial     this will set the height to 22px   the only reason there is a    context measureText string  width   is because that the width of the string can not be determined unless it knows the string you want the width of but for all the strings drawn with the font   the height will be 22px   if you use another measurement than px then the height will still be the same but with that measurement so at most all you would have to do is convert the measurement

User · Answer

one line answer  var height   parseInt ctx font    1 2     CSS  line-height  normal  is between 1 and 1 2  read here for more info

User · Answer

This works 1  for multiline text as well 2  and even in IE9    lt div class  measureText  id  measureText  gt   lt  div gt     measureText     margin  0    padding  0    border  0    font-family  Arial    position  fixed    visibility  hidden    height  auto    width  auto    white-space  pre-wrap    line-height  100      function getTextFieldMeasure fontSize  value        const div   document getElementById  measureText            returns wrong result for multiline text with last line empty     let arr   value split   n        if  arr arr length-1  length    0            value                    div innerText   value      div style  font-size    fontSize    px       let rect   div getBoundingClientRect         return  width  rect width  height  rect height

User · Answer

I found that JUST FOR ARIAL the simplest  fastest and accuratest way to find height of bounding box is to use the width of certain letters  If you plan to use a certain font without letting user to choose one different  you can do a little research to find the right letter that do the job for that font    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt canvas id  myCanvas  width  700  height  200  style  border 1px solid  d3d3d3   gt  x000D  Your browser does not support the HTML5 canvas tag  lt  canvas gt  x000D   x000D   lt script gt  x000D  var c   document getElementById  myCanvas    x000D  var ctx   c getContext  2d    x000D  ctx font    100px Arial   x000D  var txt    Hello guys   x000D  var Hsup ctx measureText  H   width  x000D  var Hbox ctx measureText  W   width  x000D  var W ctx measureText txt  width  x000D  var W2 ctx measureText txt substr 0  9   width  x000D   x000D  ctx fillText txt  10  100   x000D  ctx rect 10 100  W  -Hsup   x000D  ctx rect 10 100 Hbox-Hsup  W2  -Hbox   x000D  ctx stroke    x000D   lt  script gt  x000D   x000D   lt p gt  lt strong gt Note  lt  strong gt  The canvas tag is not supported in Internet  x000D  Explorer 8 and earlier versions  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I m writing a terminal emulator so I needed to draw rectangles around characters   var size   10 var lineHeight   1 2    CSS  line-height  normal  is between 1 and 1 2 context font   size  px   lineHeight  em monospace  width   context measureText  m   width height   size   lineHeight   Obviously if you want the exact amount of space the character takes up  it won t help  But it ll give you a good approximation for certain uses

User · Answer

setting the font size might not be practical though  since setting  ctx font       will use the one defined by CSS as well as any embedded font tags   If you use the CSS font you have no idea what the height is from a programmatic way  using the measureText method  which is very short sighted   On another note though  IE8 DOES return the width and height

User · Answer

UPDATE - for an example of this working  I used this technique in the Carota editor   Following on from ellisbben s answer  here is an enhanced version to get the ascent and descent from the baseline  i e  same as tmAscent and tmDescent returned by Win32 s GetTextMetric API  This is needed if you want to do a word-wrapped run of text with spans in different fonts sizes     The above image was generated on a canvas in Safari  red being the top line where the canvas was told to draw the text  green being the baseline and blue being the bottom  so red to blue is the full height    Using jQuery for succinctness   var getTextHeight   function font       var text       lt span gt Hg lt  span gt    css   fontFamily  font       var block       lt div style  display  inline-block  width  1px  height  0px   gt  lt  div gt        var div       lt div gt  lt  div gt       div append text  block      var body      body      body append div      try        var result            block css   verticalAlign   baseline          result ascent   block offset   top - text offset   top       block css   verticalAlign   bottom          result height   block offset   top - text offset   top       result descent   result height - result ascent       finally       div remove           return result       In addition to a text element  I add a div with display  inline-block so I can set its vertical-align style  and then find out where the browser has put it   So you get back an object with ascent  descent and height  which is just ascent   descent for convenience   To test it  it s worth having a function that draws a horizontal line   var testLine   function ctx  x  y  len  style      ctx strokeStyle   style     ctx beginPath      ctx moveTo x  y     ctx lineTo x   len  y     ctx closePath      ctx stroke         Then you can see how the text is positioned on the canvas relative to the top  baseline and bottom   var font    36pt Times   var message    Big Text    ctx fillStyle    black   ctx textAlign    left   ctx textBaseline    top      important  ctx font   font  ctx fillText message  x  y       Canvas can tell us the width var w   ctx measureText message  width      New function gets the other info we need var h   getTextHeight font    testLine ctx  x  y  w   red    testLine ctx  x  y   h ascent  w   green    testLine ctx  x  y   h height  w   blue

User · Answer

This is what I did based on some of the other answers here    x000D   x000D  function measureText text  font    x000D   const span   document createElement  span    x000D   span appendChild document createTextNode text    x000D   Object assign span style    x000D    font  font  x000D    margin   0   x000D    padding   0   x000D    border   0   x000D    whiteSpace   nowrap  x000D       x000D   document body appendChild span   x000D   const  width  height    span getBoundingClientRect    x000D   span remove    x000D   return  width  height   x000D    x000D   x000D  var font    italic 100px Georgia   x000D  var text    abc this is a test   x000D  console log measureText text  font    x000D   x000D   x000D

User · Answer

You can get a very close approximation of the vertical height by checking the length of a capital M  ctx font    bold 10px Arial    lineHeight   ctx measureText  M   width

User · Answer

Approximate solution   var c   document getElementById  myCanvas    var ctx   c getContext  2d    ctx font    100px Arial   var txt    Hello guys   var wt   ctx measureText txt  width  var height   wt   txt length    This will be accurate result in monospaced font

User · Answer

Browsers are beginning to support advanced text metrics  which will make this task trivial when it s widely supported   let metrics   ctx measureText text   let fontHeight   metrics fontBoundingBoxAscent   metrics fontBoundingBoxDescent  let actualHeight   metrics actualBoundingBoxAscent   metrics actualBoundingBoxDescent    fontHeight gets you the bounding box height that is constant regardless of the string being rendered  actualHeight is specific to the string being rendered   Spec  https   www w3 org TR 2012 CR-2dcontext-20121217  dom-textmetrics-fontboundingboxascent and the sections just below it   Support status  20-Aug-2017     Chrome has it behind a flag  https   bugs chromium org p chromium issues detail id 277215   Firefox has it in development  https   bugzilla mozilla org show bug cgi id 1102584   Edge has no support  https   wpdev uservoice com forums 257854-microsoft-edge-developer suggestions 30922861-advanced-canvas-textmetrics   node-canvas  node js module   mostly supported  https   github com Automattic node-canvas wiki Compatibility-Status

User · Answer

Funny that TextMetrics has width only and no height   http   www whatwg org specs web-apps current-work multipage the-canvas-element html textmetrics  Can you use a Span as on this example   http   mudcu be journal 2011 01 html5-typographic-metrics  alignFix

User · Answer

EDIT  Are you using canvas transforms   If so  you ll have to track the transformation matrix   The following method should measure the height of text with the initial transform   EDIT  2  Oddly the code below does not produce correct answers when I run it on this StackOverflow page  it s entirely possible that the presence of some style rules could break this function    The canvas uses fonts as defined by CSS  so in theory we can just add an appropriately styled chunk of text to the document and measure its height   I think this is significantly easier than rendering text and then checking pixel data and it should also respect ascenders and descenders   Check out the following   var determineFontHeight   function fontStyle      var body   document getElementsByTagName  body   0     var dummy   document createElement  div      var dummyText   document createTextNode  M      dummy appendChild dummyText     dummy setAttribute  style   fontStyle     body appendChild dummy     var result   dummy offsetHeight    body removeChild dummy     return result        A little test    var exampleFamilies     Helvetica    Verdana    Times New Roman    Courier New    var exampleSizes    8  10  12  16  24  36  48  96   for var i   0  i  lt  exampleFamilies length  i        var family   exampleFamilies i     for var j   0  j  lt  exampleSizes length  j          var size   exampleSizes j     pt       var style    font-family      family      font-size      size            var pixelHeight   determineFontHeight style       console log family         size        gt      pixelHeight     pixels high             You ll have to make sure you get the font style correct on the DOM element that you measure the height of but that s pretty straightforward  really you should use something like  var canvas             var context   canvas getContext  2d    var canvasFont            var fontHeight   determineFontHeight  font      canvasFont         context font   canvasFont       do your stuff with your font and its height here

User · Answer

The canvas spec doesn t give us a method for measuring the height of a string   However  you can set the size of your text in pixels and you can usually figure out what the vertical bounds are relatively easily   If you need something more precise then you could throw text onto the canvas and then get pixel data and figure out how many pixels are used vertically   This would be relatively simple  but not very efficient   You could do something like this  it works  but draws some text onto your canvas that you would want to remove    function measureTextHeight ctx  left  top  width  height            Draw the text in the specified area     ctx save        ctx translate left  top   Math round height   0 8        ctx mozDrawText  gM       This seems like tall text     Doesn t it      ctx restore            Get the pixel data from the canvas     var data   ctx getImageData left  top  width  height  data          first   false           last   false          r   height          c   0          Find the last line with a non-white pixel     while  last  amp  amp  r            r--          for c   0  c  lt  width  c                  if data r   width   4   c   4   3                     last   r                  break                                        Find the first line with a non-white pixel     while r            r--          for c   0  c  lt  width  c                  if data r   width   4   c   4   3                     first   r                  break                                      If we ve got it then return the height         if first    r  return last - first                We screwed something up     What do you expect from free code      return 0        Set the font context mozTextStyle    32px Arial       Specify a context and a rect that is safe to draw in when calling measureTextHeight var height   measureTextHeight context  0  0  50  50   console log height     For Bespin they do fake a height by measuring the width of a lowercase  m      I don t know how this is used  and I would not recommend this method   Here is the relevant Bespin method   var fixCanvas   function ctx           upgrade Firefox 3 0 x text rendering to HTML 5 standard     if   ctx fillText  amp  amp  ctx mozDrawText            ctx fillText   function textToDraw  x  y  maxWidth                ctx translate x  y               ctx mozTextStyle   ctx font              ctx mozDrawText textToDraw               ctx translate -x  -y                        if   ctx measureText  amp  amp  ctx mozMeasureText            ctx measureText   function text                ctx mozTextStyle   ctx font              var width   ctx mozMeasureText text               return   width  width                         if  ctx measureText  amp  amp   ctx html5MeasureText            ctx html5MeasureText   ctx measureText          ctx measureText   function text                var textMetrics   ctx html5MeasureText text                   fake it  til you make it             textMetrics ascent   ctx html5MeasureText  m   width               return textMetrics                          for other browsers     if   ctx fillText            ctx fillText   function                 if   ctx measureText            ctx measureText   function     return 10

User · Answer

I know this is an old answered question  but for future reference I d like to add a short  minimal  JS-only  no jquery  solution I believe people can benefit from   var measureTextHeight   function fontFamily  fontSize         var text   document createElement  span        text style fontFamily   fontFamily      text style fontSize   fontSize    px       text textContent    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789        document body appendChild text       var result   text getBoundingClientRect   height      document body removeChild text       return result

User · Answer

In normal situations the following should work   var can   CanvasElement getContext  2d               get context var lineHeight     0-9     pt px   exec can font     get height from font variable

User · Answer

I solved this problem straitforward - using pixel manipulation   Here is graphical answer     Here is code       function textHeight  text  font         var fontDraw   document createElement  canvas         var height   100      var width   100          here we expect that font size will be less canvas geometry     fontDraw setAttribute  height   height       fontDraw setAttribute  width   width        var ctx   fontDraw getContext  2d           black is default     ctx fillRect 0  0  width  height       ctx textBaseline    top       ctx fillStyle    white       ctx font   font      ctx fillText text   Eg     0  0        var pixels   ctx getImageData 0  0  width  height  data          row numbers where we first find letter end where it ends      var start   -1      var end   -1       for  var row   0  row  lt  height  row              for  var column   0  column  lt  width  column                   var index    row   width   column    4                  if pixel is not white  background color              if  pixels index     0                       we havent met white  font color  pixel                    on the row and the letters was detected                 if  column    width - 1  amp  amp  start    -1                        end   row                      row   height                      break                                    continue                            else                      we find top of letter                 if  start    -1                        start   row                                         letters body                 break                                            document body appendChild fontDraw       fontDraw style pixelLeft   400      fontDraw style pixelTop   400      fontDraw style position    absolute              return end - start

[javascript] How can you find the height of text on an HTML canvas?

Examples related to javascript

Examples related to text

Examples related to canvas