Going Mobile! - HTML5 Canvas - page 845

context . shadowOffsetX = 3 ;
context . shadowOffsetY = 3 ;
context . shadowBlur = 3 ;
context . shadowColor = "#222222" ;

context . lineWidth = 4 ;
context . lineJoin = 'round' ;
context . strokeStyle = this this . strokeColor ;

iif ( this this . press == true true ){

context . fillStyle = this

this . overColor ;

} else else {

context . fillStyle = this

this . backColor ;

}

context . strokeRect ( 0 , 0 , this this . width , this this . height );

context . fillRect ( 0 , 0 , this this . width , this this . height );

//text
context . shadowOffsetX = 1 ;
context . shadowOffsetY = 1 ;
context . shadowBlur = 1 ;
context . shadowColor = "#ffffff" ;
context . font = "14px serif"
context . fillStyle = this this . textColor ;

context . textAlign = "center" ;
context . textBaseline = "middle" ;
var var metrics = context . measureText ( this this . text );

var var textWidth = metrics . width ;

var

var xPosition = this this . width / 2 ;

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

var var splitText = this this . text . split ( '\n' );

var var verticalSpacing = 14 ;

for for ( var var ctr1 = 0 ; ctr1 < splitText . length ; ctr1 ++ ) {

context . fillText ( splitText [ ctr1 ], xPosition ,
yPosition + ( ctr1 * verticalSpacing ));

}

context . restore ();

}

Thisobjectprototypecontainsfunctionsforcreating,drawing,andclickingagraysquarebut-
ton with black text on it. When clicked, the button will be drawn with a yellow background.
We have covered all these drawing functions earlier in this topic, so they will look familiar