HTML5 Canvas Text Wrap Tutorial

I’m using a small amount of dialogue in Distant Orbit to help tell the story. One thing that I wanted to maintain was simplicity when it comes to handing over the text files for localisation.

So to this end I needed to allow for text to wrap across lines within the canvas.
Some languages are quite a bit longer and more complex than English. German and French in particular can have some lengthy translations. So I wanted to be able to give the translator freedom when it comes to choosing the appropriate words to tell the story.

There isn’t a native textBlock functionality within the Canvas text API so I looked around for a solution and found this one pretty much straight away.
The key here is in understanding what context.measureText() is doing for you. I think it’s pretty self explanatory.

1.8.7 HTML5 Canvas Text Wrap Tutorial.

%d bloggers like this: