HTML and CSS Reference
In-Depth Information
Figure 2-12. Simple rotation transformation
We get a result this time, but it will probably differ from what you expect. The red box is ro-
tated,butitlookslikethecanvaswasrotatedwithit.Theentirecanvasdidnotrotate,onlythe
portion drawn after the
context.rotate()
function was called. So, why did our square both
rotate and move off to the left of the screen? The origin of the rotation was set at the “non-
translated”
0,0
position, resulting in the square rotating from the top left of the entire canvas.
Example 2-8
offers a slightly different scenario: draw a black box first, then set the rotation
transform, and finally, draw the red box again. See the results in
Figure 2-13
.
Example 2-8. Rotation and the Canvas state
function
function
drawScreen
() {
//draw black square
context
.
fillStyle
=
"black"
;
context
.
fillRect
(
20
,
20
,
25
,
25
);
//now draw a red square
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
45
*
Math
.
PI
/
180
;
context
.
rotate
(
angleInRadians
);
context
.
fillStyle
=
"red"
;
context
.
fillRect
(
100
,
100
,
50
,
50
);
}
