HTML5 Canvas, 2nd Edition

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 transformation in our game.

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-serif';
      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);