Canvas Game Essentials - HTML5 Canvas - page 392

Alpha Fading the Player Ship
When a new player ship in Geo Blaster Basic enters the game screen, we will have it
fade from transparent to opaque. Example 8-7 shows how we will create this transfor-
mation in our game.
Using the context.globalAlpha attribute
To use the context.globalAlpha attribute of the canvas, we simply set it to a number
between 0 and 1 before we draw the game graphics. We will create a new variable in
our code called alpha , which will hold the current alpha value for our player ship. We
will increase it by .01 until it reaches 1 . When we actually create our game we will stop
it at 1 and then start the game level. However, for this demo, we will just repeat it over
and over.
Example 8-7. Alpha fading to the player ship
//canvasApp level variables
var x = 50;
var y = 50;
var width = 20;
var height = 20;
var alpha = 0;
context.globalAlpha = 1;
function drawScreen() {
context.globalAlpha = 1;
context.fillStyle = '#000000';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#ffffff';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Player Ship - alpha", 0, 180);
context.globalAlpha = alpha;
context.save(); //save current state in stack
context.setTransform(1,0,0,1,0,0); // reset to identity
//translate the canvas origin to the center of the player
context.translate(x+.5*width,y+.5*height);
//drawShip
context.strokeStyle = '#ffffff';
context.beginPath();
//hardcoding in locations
context.moveTo(0,-10);
context.lineTo(9,9);
context.lineTo(0,-1);
context.moveTo(-1,-1);
context.lineTo(-10,9);
context.lineTo(-1,-10);