1

It may seem like a really random question, but I am trying to figure out a hack to get correctly letter-spaced text rendered on a canvas.

After much searching in google it seems like there is no way to really do this. The first thing I tried was rendering each character in a string, measuring it, adding it to an offset, adding the letter-spacing, but the results are pretty poor. Probably due to information contained in the font file about character pairing spaces etc.

The only thing I can think of to get a perfect result is to render text to a html element, set letter spacing via CSS, then somehow capture the element in memory as an image. I know it is unlikely but does anyone know a way to do this?

Piyas De
  • 1,786
  • 15
  • 27
jcvandan
  • 14,124
  • 18
  • 66
  • 103
  • 1
    http://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element – Dave Mar 31 '13 at 14:33
  • The project linked to on that question html2canvas is crazy, massive undertaking re-writing their own CSS parser ha! – jcvandan Apr 01 '13 at 08:43

1 Answers1

1

Why not just move the HTML element on top of the canvas?

<canvas style="background-color:cyan; left:100px; right:100px; width:100px; height:100px; position:absolute" >
</canvas>
<p style="left:120px; right:100px; position:absolute; z-index:100; ">this is a test</p>
Steve Wellens
  • 20,506
  • 2
  • 28
  • 69
  • This is what I am actually doing at the moment, and tbh it's probably either do this OR create an image on the server and return to the client. The only thing about doing it this way is you don't get the power of canvas transformations etc, but hey ho it's a solution! – jcvandan Apr 01 '13 at 08:41
  • If you rendered it at the server, you'd have to decide what browser/device/screen-resolution to render it for. – Steve Wellens Apr 01 '13 at 14:11
  • True although if it is a fixed width surely the only thing I need to worry about is retina displays?? – jcvandan Apr 01 '13 at 18:41