Introduction to HTML5 Canvas - HTML5 Canvas - page 51

Updating the globalAlpha Property for Text Display

Because the animation in this example is composed of fading text in and out on the Canvas,
the main operation of the drawScreen() function is to update the alpha and fadeIn proper-
ties accordingly. If the text is fading in ( fadeIn is true ) we increase the alpha property by
.01 . If alpha is increased above 1 (the maximum it can be), we reset it back to 1 and then set
fadeIn to false . This means that we will start fading out. We do the opposite if fadeIn is
false , setting it back to true when the value of alpha hits 0 . After we set the alpha value,
weapplyittotheCanvasbysetting context.globalAlpha tothevalueofthealphaproperty:

iif ( fadeIn ) {
alpha += . 01 ;
iif ( alpha >= 1 ) {
alpha = 1 ;
fadeIn = false

false ;

}
} else

else {
alpha -= . 01 ;
iif ( alpha < 0 ) {
alpha = 0 ;
fadeIn = true

true ;

}

}

context . globalAlpha = alpha ;