Dynamic graphics - HTML5 and CSS3 - page 86

WRITIN YR TXT',
10,40);
}
}
You can of course draw both fill and
stroke on a single line of text if you want.
Let's see what happens if you increase the
font size a bit more. Remember, the exam-
ple <canvas> element is 320 pixels wide:
ctx.font = "20pt sans-serif";
ctx.fillText(
'HAI! IZ IN YR ELEMENT
WRITIN YR TXT',
10,80);
ctx.strokeText(
'HAI! IZ IN YR ELEMENT
WRITIN YR TXT',
10,110);
As you can see, the text that doesn't fit
flows off the edge of the element without
wrapping.
To work around this issue, you can use the
fourth, optional, parameter to the fillText
and strokeText methods. This parameter
sets a maximum width for the text; if the
text will be wider than the value passed,
the browser makes the text fit either by
narrowing the spacing between the letters
or scaling down the font:
ctx.fillText(
'HAI! IZ IN YR ELEMENT
WRITIN YR TXT',
10,150,300);
ctx.strokeText(
'HAI! IZ IN YR ELEMENT
WRITIN YR TXT',
10,180,300);