Canvas Games: Part I - HTML5 Canvas - page 653

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 wedrawthe game graphics. Wewill create anewvariable inourcode
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 var x = 50 ;

var var y = 50 ;

var

var width = 20 ;
var var height = 20 ;

var

var alpha = 0 ;
context . globalAlpha = 1 ;

function 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 );