HTML and CSS Reference
In-Depth Information
Wethenmakesuretoturnofftheshadowbeforewerenderthebackgroundfor
textArranger
inthe
drawScreen()
.Wedon'thavetoresetthe
shadowColor
,butwethinkitisgoodpractice
to update all the relative properties relating to any global change to the Canvas context:
context
.
shadowColor
=
"#707070"
;
context
.
shadowOffsetX
=
0
;
context
.
shadowOffsetY
=
0
;
context
.
shadowBlur
=
0
;
Later in
drawScreen()
, we render the shadow based on the settings in the four variables we
created:
context
.
shadowColor
=
shadowColor
;
context
.
shadowOffsetX
=
shadowX
;
context
.
shadowOffsetY
=
shadowY
;
context
.
shadowBlur
=
shadowBlur
;
We also need to create the HTML to allow the user to update the shadow settings. We do this
with three
range
controls, as well as another color picker using
jsColor
:
Shadow X:
<input
<input type=
"range"
id=
"shadowX"
min=
"−100"
max=
"100"
step=
"1"
value=
"1"
//>
<br>
<br>
Shadow Y:
<input
<input type=
"range"
id=
"shadowY"
min=
"−100"
max=
"100"
step=
"1"
value=
"1"
//>
<br>
<br>
Shadow Blur:
<input
<input type=
"range"
id=
"shadowBlur"
min=
"1"
max=
"100"
step=
"1"
value=
"1"
//>
<br>
<br>
Shadow Color:
<input
<input class=
"color"
id=
"shadowColor"
value=
"707070"
//>
Finally,weneedtoaddtheeventlistenersandeventhandlerfunctionssothattheHTMLform
elements can communicate with the canvas. See the results in
Figure 3-8
:
formElement
=
document
.
getElementById
(
"shadowX"
);
formElement
.
addEventListener
(
'change'
,
shadowXChanged
,
false
false
);