HTML and CSS Reference
In-Depth Information
Then, we need to decide how to format our “color” for the
fillStyle
or
strokeStyle
of the
context. In this instance, it can be a CSS color, a gradient, or an image pattern; the following
list provides more information:
Color fill
If we are doing a simple color fill, we operate just like in previous versions of Text Ar-
ranger. All we need to do is make
tempColor
equal to the value of
textFillColor
.
Linear gradient
Forthelineargradient,weneedtodecidewhatlinewearegoingtocreateforthegradient.
Our line will start at the beginning of the text (
xPosition-textWidth/2
because the text
uses the
center
alignment), and runs horizontally to the end of the text (
textWidth
). We
also add two color stops (at 0% and 60%)—the colors are
textFillColor1
and
tex-
tFillColor2
.
Radial gradient
For the radial gradient, we are going to create a cone that starts at the center of the text
(
xPosition
,
yPosition
) with a radius the size of the font (
fontSize
). The cone will ex-
tend horizontally the width of the text (
textWidth
) with a radius of 1.
Pattern
Forthisoption,wecreateapatternusingthepattern
image
variablewepreviouslycreated.
We designate it to
repeat
so that it will tile horizontally and vertically.
Here's the code:
var
var
tempColor
;
iif
(
fillType
==
"colorFill"
) {
tempColor
=
textFillColor
;
}
else
else iif
(
fillType
==
"linearGradient"
) {
var
var
gradient
=
context
.
createLinearGradient
(
xPosition
-
textWidth
/
2
,
yPosition
,
textWidth
,
yPosition
);
gradient
.
addColorStop
(
0
,
textFillColor
);
gradient
.
addColorStop
(.
6
,
textFillColor2
);
tempColor
=
gradient
;
}
else
else iif
(
fillType
==
"radialGradient"
) {
var
var
gradient
=
context
.
createRadialGradient
(
xPosition
,
yPosition
,
fontSize
,
xPosition
+
textWidth
,
yPosition
,
1
);
gradient
.
addColorStop
(
0
,
textFillColor
);
gradient
.
addColorStop
(.
6
,
textFillColor2
);
tempColor
=
gradient
;
}
else
else iif
(
fillType
==
"pattern"
) {
