Question

I’m making an HTML5 game, and I need a way to textually inform the player about things. I’d like to put the text in this box, using the fillText method:

Now, I only know how to render the text in one line, but that obviously wouldn’t suffice, because there need to be linebreaks for the text to fit. Is there a way to do this quickly, or will I have to code it myself?

This is how a message looks ingame:

Answer 1

Looking at the spec, you’ll have to do it yourself if you want to use only canvas.

To do so, you’ll need to use measureText in order to get the size of your text and to break it manually. But that seems quite bothersome.

Another solution that I find more elegant is to use an overlay of HTML. The HTML to use for that could look like that:

<div id="outer" syle="position:relative">
   <canvas id='myCanvas'/>
   <div id="textualDiv" syle="position:absolute"></div>
</div>

You’d then position textualDiv according to your need and you’ll just fill it when you’ll need it. After that you’ll just hide it. And show it again when the need arise.