Introduction to HTML5 Canvas - HTML5 Canvas - page 50

Clearing and Displaying the Background

In the drawScreen() function that is called every 20 milliseconds, we need to redraw the
Canvas to update the animation.

Because our little application uses globalAlpha to change the transparency of things we are
drawing, we first need to make sure to reset the property before we start our drawing opera-
tion. We do this by setting context.globalAlpha to 1 and then drawing the background (a
black box). Next we set the globalAlpha property to .25 and draw the helloWorldImage
that we loaded. This will display the image at 25% opacity, with the black background show-
ing through:

function function drawScreen () {

//background
context . globalAlpha = 1 ;
context . fillStyle = "#000000" ;
context . fillRect ( 0 , 0 , 640 , 480 );
//image
context . globalAlpha = . 25 ;
context . drawImage ( helloWorldImage , 0 , 0 );