Working with Audio - HTML5 Canvas - page 587

}

}

In the eventMouseUp() handler, we test to see whether volumeSliderDrag is set to true .
If so, it means that the user has released the mouse button and no longer wants to drag the
volume slider. We set volumeSliderDrag to false so that the slider will not move with the
mouse:

iif ( volumeSliderDrag ) {
volumeSliderDrag = false false ;

}

Also, make sure this test is outside the test of (timeWaited >= buttonWait) , or the slider
will stick to the mouse (in some browsers).

In drawScreen() ,weactuallyputthepixelstothecanvas,sotospeak,withthevolumeslider.
First, we draw the background image from buttonSheet :

//vol Background
context . drawImage ( buttonSheet , 32 , 32 , volBackW , bH , volBackX , volBackY ,
volBackW , bH );

Next, we check to see whether volumeSliderDrag is true . If so, we make the
volumeSliderX variableequaltothemouse's x position.Thenwedropinacouplemoretests
todeterminewhetherthe x positionofthevolumesliderfallsoutsidetheboundsofthevolume
background. These two tests make sure that the volume slider does not move past the right-
most or leftmost sides of the volume slider background, and in turn, the volume property of
audioElement is not calculated to be more than 1 or less than 0 :

iif ( volumeSliderDrag ) {
volumeSliderX = mouseX ;
iif ( volumeSliderX > volumeSliderEnd ) {
volumeSliderX = volumeSliderEnd ;

}
iif ( volumeSliderX < volumeSliderStart ) {
volumeSliderX = volumeSliderStart ;

}

If the volumeSliderDrag is false , we still need an x position at which to draw the slider
graphic. We get this the same way we calculated the volumeSliderX value when we initial-
ized the variable in the canvasApp() function: