在html5画布中将文本绘制为图像

Question

I am working in a HTML5 project.I want to draw text with boundaries (ie. Text Annotation).

First i am drawing an rectangle and filling text inside it on mousemove as follow:

context.strokeRect(x,y,w,h);
context.fillText('Enter youe text here',x,y);

but when i start to draw text annotation, then text draw completely. so text overflow outside the rectangle boundary. So i want to take image of rectangle part then i can manage this overflow problem of text. I am using following way to do this:-

 context.strokeRect(x,y,w,h);
 context.fillText('Enter youe text here',x,y);
 var imageData = context.getImageData(x,y,w,h);
 var data = imageData.data;
 context.putImageData(imageData, x,y);

Through this way text-image is creating at successfully,but now how can i hide the fillText(x,y,w,h) statement and i am also taking image-data imside rectangle with help of the text.

THanks a lot in advance

Answer 1

It seems as you want to measure the text width and split the canvas up, if I am understanding correctly?

I prototyped a little example that explains how to use the measureText method:

http://jsfiddle.net/sQ3S7/

Actually, as you can see in the demo, it returns no measured height dimension. So you may have to loop through the canvas line-by-line to find out how the height of the text is.

For my JS game engine, I did a little font tool that does exactly that and exports it to a JSON format, maybe the algorithms behind will help you on your way :)

http://martens.ms/lycheeJS/tool/Font.html

Code is available on github.com/martensms/lycheeJS (Can't post more than two links as I'm new to SO)

~Cheers