I would like to be able to center single lines of text within rectangular areas I can calculate. The one thing I have expected to do in 2D geometry on a canvas is to center something whose width is unknown to you.
I have heard as a workaround that you can create the text in an HTML container and then call jQuery's width()
function, but I ?didn't correctly handle the momentary addition to the document's body? and got a width of 0.
If I have a single line of text, significantly shorter than would fill most of the width in a screen, how can I tell how wide it will be on a canvas at a font size I know?
If you don't necessarily need a width of the text but just want to center text you can do
canvas_context.textBaseline = "middle";
canvas_context.textAlign = "center";
Which should put a text centered both vertically and horizontally.
See MDN's textAlign and textBaseline for extra info with pictures