5.11 Transformations 157must be carried out in reverse order: In terms of JavaScript code, they basically
must be read from back to front.
To first scale and then rotate, we write:
context.rotate(0.175);
context.scale(0.75,0.75);
context.fillRect(0,0,200,150);
If we want to rotate first and then translate, the JavaScript code would have to be:
context.translate(100,50);
context.rotate(0.175);
context.fillRect(0,0,200,150);
You need to be careful in any case where rotations are involved, because they are
always carried out with the origin 0/0 as the center of rotation. The rule of thumb
is that rotate() is usually the last action. Figure 5.36 shows an example using all
three basic methods, depicting our Yosemite image from a different perspective
as a kind of ski jump.
Figure 5.36 Rotate, scale and move