title: Sharing baseline between canvas text and html element
body: <p>I'm drawing some text to a HTML canvas element, and next to that text I have a plain CSS-styled and absolutely positioned HTML button, with the position computed by JavaScript. I'd like to use the same font for both, which seems easy, and I'd also like both to share the same baseline. Which, as far as I can tell, is really hard at the moment, at least given the set of constraints I'm facing.</p>
  
  <ul>
  <li>Out of the box, the canvas-drawn text uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline" rel="nofollow noreferrer"><code>textBaseline = 'alphabetic'</code></a>, and I can't change that (for compatibility reasons and to get basline-aligned text using different fonts within the canvas). On the other hand, absolute positioning on the HTML element uses the top or bottom margin, but not the baseline.</li>
  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics" rel="nofollow noreferrer"><code>TextMetrics</code> documentation on MDN</a> describes various vertical measurements, but points out that they are only available on Chrome and even there only after some flag has been set. I need something that works on a decent percentage (say >80%) of current browsers.</li>
  <li>I don't know what font will be used, so hard-coding some metric information about the font is not an option.</li>
  </ul>
  
  <p>So what options do I have?</p>
  
  <ol>
  <li><p>Do I have to render the font to a second off-screen canvas and <a href="https://stackoverflow.com/a/15649357/1468366">examine its pixel data</a> in order to find the actual dimensions? Can I even trust that these actual dimensions, as computed from marked pixel on the canvas, match the dimensions used to compute the size of the button even for some of the more artistic fonts?</p></li>
  <li><p>Do I need to <a href="https://stackoverflow.com/a/20445421/1468366">resort to a spacer image</a>? By the way, the main difference between my question and <a href="https://stackoverflow.com/q/20443220/1468366">that one</a> is probably the fact that I'm doing the positioning in JavaScript, so I don't need a pure CSS solution, and I can use what help a canvas can give me.</p></li>
  <li><p>Is there some other (i.e. without spacer image) way to leverage the <code>vertical-align</code> CSS property, by creating some outer box with a well-defined baseline and then nesting the button inside that aligned to the same baseline?</p></li>
  <li><p>Any other direction I could take?</p></li>
  </ol>