HTML and CSS Reference
In-Depth Information
ment to handle the choices. If the choice is
both
, we set the
strokeStyle
to black (
#000000
)
as the highlight for the colored
fillText
.
If we use the
xPosition
and
yPosition
calculated using the width and height of the canvas,
the
message
variable that contains the default or user-input text, and the
fillOrStroke
vari-
able to determine how to render the text, we can display the text as configured by the user in
drawScreen()
:
var
var
metrics
=
context
.
measureText
(
message
);
var
var
textWidth
=
metrics
.
width
;
var
var
xPosition
=
(
theCanvas
.
width
/
2
)
-
(
textWidth
/
2
);
var
var
yPosition
=
(
theCanvas
.
height
/
2
);
switch
switch
(
fillOrStroke
) {
case
case
"fill"
:
context
.
fillStyle
=
"#FF0000"
;
context
.
fillText
(
message
,
xPosition
,
yPosition
);
break
break
;
case
case
"stroke"
:
context
.
strokeStyle
=
"#FF0000"
;
context
.
strokeText
(
message
,
xPosition
,
yPosition
);
break
break
;
case
case
"both"
:
context
.
fillStyle
=
"#FF0000"
;
context
.
fillText
(
message
,
xPosition
,
yPosition
);
context
.
strokeStyle
=
"#000000"
;
context
.
strokeText
(
message
,
xPosition
,
yPosition
);
break
break
;
}
Example 3-1
(
CH3EX1.html
) in the code distribution shows the full code for Text Arranger
1.0. Test it out to see how the user controls in HTML affect the canvas. There are not
many ways to change the text here, but you can see the difference between
fillText
and
strokeText
.