Drawing on the Canvas - HTML5 Canvas - page 43

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 rotated, but it looks like the canvas was rotated with it. The entire canvas did not
rotate, only the 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 “nontranslated” 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 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 angleInRadians = 45 * Math.PI / 180;
context.rotate(angleInRadians);
context.fillStyle = "red";
context.fillRect(100,100,50,50);
}
Figure 2-13. Rotation and the Canvas state
The small black square was unaffected by the rotation, so you can see that only the
shapes drawn after the context.rotate() function was called were affected.