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 );
Search WWH ::




Custom Search