HTML and CSS Reference
In-Depth Information
Name
Description
Example
Writes text at location
(x,y)
and fills it according
to the
fillStyle
. The
text is written according
to the values set for
font
,
textAlign
, and
textBaseline
.
fillText(text, x,
y [, maxWidth])
context.font = "30px
sans-serif";
context.fillStyle = "rgba
(0, 255, 0, .5)";
context.fillText("Canvas is
great!", 10, 40);
Sets the font for a text
string. Must be in the same
format as CSS fonts. The
default is
10px sans-
serif
.
font
context.font = "bold 20px
Courier New";
measureText(text)
Returns a
TextMetrics
object for the given text.
Currently, the only property
for that object is
width
.
context.font = "bold 20px
Verdana";
tm = context.measureText
("I love Canvas");
var width = tm.width;
strokeText(text,
x, y
[, maxWidth])
Writes text at location
(x,y)
according to the
strokeStyle
. The
text is written according
to the values set for
font
,
textAlign
, and
textBaseline
.
context.font = '30px
sans-serif';
context.strokeStyle = "orange";
context.strokeText('Canvas is
great!', 10, 40);
textAlign
Sets the alignment of
a text string. The
x
,
y
points specified will line
up according to the option
chosen. The options are
start
,
end
,
left
,
right
,
and
center
. The default
value is
start
.
context.textAlign = "end";
textBaseline
Sets the text baseline for
a text string. The options
are
top
,
hanging
,
middle
,
alphabetic
,
ideographic
, and
bottom
. The default value
is
alphabetic
.
context.textBaseline =
"ideographic";
T
ABLE
3-20
canvas Text API Methods and Properties
