Rendering <canvas> text inside arbitarily shaped vector container

I'd like to render user inputed text inside of heart shaped container in (yes, Valentine 开发者_StackOverflow中文版is coming soon...) Note that this needs to be outputted on so CSS solutions are ruled out.

• If there exist any solutions / libraries to set shape for text container I'd hope to get pointers to them

• If there aren't text shaping solutions then I'd like to simple have a rectangular box where I simply shrink text until it fits in... how do I measure whether text fits in a box on

Clarified: lines of text wrapping on a heart shaped edge.

Text is dynamic.

SVG etc. is accetable as long as I can draw it on canvas.

Before you do anything, ask yourself if SVG would be more appropriate here.

Unfortunately there's no built-in way to say "make it fit this size." Normally you gotta pick a font size, remeasure, and redo. There is one better way, but first how to do the font way:

One way is to pick a guess, say 50pt and measure the text. If it is too big, try 49pt and remeasure. If its still too big, try 48 pt, and so on.

Another way is to pick a guess, say 50pt. If its too big, cut it in half to 25pt. Too big still? Cut it in half again to 12pt. Too small? add half to get 18pt, etc, until you are close enough. This may sound familiar to you if you have studied algorithms. :)

The second way is to use the canvas' scale. Lucky for us, text on the canvas scales gracefully.

I assume that what you have is not a single sentence but a block of text. Well enough. Write out the block of text on canvas and measure the width and height of it. Once you've got that, you can scale it appropriately using ctx.scale to fit any size.