HTML5 Canvas, 2nd Edition

Some Necessary Properties

For this application we need a few properties to set everything up.

The alpha property is the value that we will apply to context.globalAlpha to set the transparency value for text that we will fade in and out. It is set to 0 to start, which means the text will start completely invisible. We will explain more about this in the next section.

The fadeIn property will tell our application if the text is currently fading in or fading out.

The text property holds the string we will display.

The helloWorldImage property will hold the background image we will display behind the fading text:

var alpha = 0;
var fadeIn = true;
var text = "Hello World";
var helloWorldImage = new Image();
helloWorldImage.src = "html5bg.jpg";