Canvas Games: Part I - HTML5 Canvas - page 651

function function drawScreen () {

// draw background and text
context . fillStyle = '#000000' ;
context . fillRect ( 0 , 0 , 200 , 200 );
context . fillStyle = '#ffffff' ;
context . font = '20px sans-serif' ;
context . textBaseline = 'top' ;
context . fillText ( "Player Ship - rotate" , 0 , 180 );

//transformation
var

var angleInRadians = rotation * Math . PI / 180 ;
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 );
context . rotate ( angleInRadians );

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

/*
//using the width and height to calculate
context.moveTo(10-.5*width,0-.5*height);
context.lineTo(19-.5*width,19-.5*height);
context.lineTo(10-.5*width,9-.5*height);
context.moveTo(9-.5*width,9-.5*height);
context.lineTo(0-.5*width,19-.5*height);
context.lineTo(9-.5*width,0-.5*height);
*/

context . stroke ();
context . closePath ();

//restore context
context . restore (); //pop old state on to screen