Drawing on the Canvas - HTML5 Canvas - page 93

context . fillStyle = "red" ;
context . fillRect ( - . 5 * width , - . 5 * height , width , height );

context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
var var angleInRadians = 90 * Math . PI / 180 ;

var var x = 150 ;

var

var y = 100 ;
var var width = 40 ;

var

var height = 40 ;
context . translate ( x + . 5 * width , y + . 5 * height );
context . rotate ( angleInRadians );
context . fillStyle = "red" ;
context . fillRect ( - . 5 * width , - . 5 * height , width , height );
context . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 );
var var angleInRadians = 120 * Math . PI / 180 ;

var

var x = 200 ;
var var y = 100 ;

var

var width = 40 ;
var var height = 40 ;

context . translate ( x + . 5 * width , y + . 5 * height );
context . rotate ( angleInRadians );
context . fillStyle = "red" ;
context . fillRect ( - . 5 * width , - . 5 * height , width , height );

}

Figure 2-17. Multiple rotated squares

Next, we will examine scale transformations.