HTML and CSS Reference
In-Depth Information
fillText and strokeText
The
context.fillText()
function (as shown in
Figure 3-1
) will render solid colored text
to the canvas. The color used is set in the
context.fillColor
property. The font used
is set in the
context.font
property. The function call looks like this:
fillText([text],[x],[y],[maxWidth]);
where:
text
The text to render on the canvas.
x
The
x
position of the text on the canvas.
y
The
y
position of the text on the canvas.
maxWidth
The maximum width of the text as rendered on the canvas. At the time of this
writing, support for this property was just being added to browsers.
Figure 3-1. fillText in action
The
context.strokeText()
function (as shown in
Figure 3-2
) is similar, but it specifies
the outline of text strokes to the canvas. The color used to render the stroke is set in
the
context.strokeColor
property; the font used is set in the
context.font
property.
The function call looks like:
strokeText([text],[x],[y],[maxWidth])
