The HTML5 Canvas Text API - HTML5 Canvas - page 211

var var message = "HTML5 Canvas" ;

var var theCanvas = document . getElementById ( "canvasOne" );

var var context = theCanvas . getContext ( "2d" );

function function drawScreen () {

//Background

context . fillStyle = "#000000" ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );

//Text

context . font = "90px impact"
context . textAlign = "center" ;
context . textBaseline = "middle" ;

var var metrics = context . measureText ( message );

var

var textWidth = metrics . width ;
var var xPosition = ( theCanvas . width / 2 );

var var yPosition = ( theCanvas . height / 2 );

var var gradient = context . createLinearGradient ( theCanvas . width / 2 , 0 ,

theCanvas . width / 2 , theCanvas . height );

for for ( var var i = 0 ; i < colorStops . length ; i ++ ) {

var var tempColorStop = colorStops [ i ];

var

var tempColor = tempColorStop . color ;
var var tempStopPercent = tempColorStop . stopPercent ;

gradient . addColorStop ( tempStopPercent , tempColor );
tempStopPercent += . 015 ;
iif ( tempStopPercent > 1 ) {
tempStopPercent = 0 ;

}
tempColorStop . stopPercent = tempStopPercent ;;
colorStops [ i ] = tempColorStop ;

}

context . fillStyle = gradient ;
context . fillText ( message , xPosition , yPosition );

}