HTML5 Canvas [21]
Example 2-10. Multiple rotated squares
function drawScreen() {
//now draw a red square
context.setTransform(1,0,0,1,0,0);
var angleInRadians = 45 * Math.PI / 180;
var x = 50;
var y = 100;
var width = 40;
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 angleInRadians = 75 * Math.PI / 180;
var x = 100;
var y = 100;
var width = 40;
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 angleInRadians = 90 * Math.PI / 180;
var x = 150;
var y = 100;
var width = 40;
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 angleInRadians = 120 * Math.PI / 180;
var x = 200;
var y = 100;
var width = 40;
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.
Scale Transformations
The context.scale() function takes in two parameters: the first is the scale attribute for the x-axis, and the second is the scale attribute for the y-axis. The value 1 is the normal scale for an object. Therefore, if we want to double an object’s size, we can set both values to 2. Using the code below in drawScreen() produces the red square shown in Figure 2-18:
context.setTransform(1,0,0,1,0,0);
context.scale(2,2);
context.fillStyle = "red";
context.fillRect(100,100 ,50,50);
Figure 2-18. A simple scaled square
If you test this code, you will find that scale works in a similar manner as rotation. We did not translate the origin of the scale point to double the size of the square; rather, we used the top-left corner of the canvas as the origin point. The result is that the red square appears to move farther down and to the left. What we would like is for the red square to remain in place and to scale from its center. We do this by translating to the center of the square before we scale, and by drawing the square around this center point (just as we did in Example 2-9). Example 2-11 produces the result shown in Figure 2-19.
Example 2-11. Scale from the center point
function drawScreen() {
//now draw a red square
context.setTransform(1,0,0,1,0,0);
var x = 100;
var y = 100;
var width = 50;
var height = 50;
context.translate(x+.5*width, y+.5*height);
context.scale(2,2);
context.fillStyle = "red";
context.fillRect(-.5*width,-.5*height , width, height);
}
Figure 2-19. Scale from the center point
Combining Scale and Rotation Transformations
If we want to both scale and rotate an object, Canvas transformations can easily be combined to achieve the desired results (as shown in Figure 2-20). Let’s look in Example 2-12 at how we might combine them by using scale(2,2) and rotate(angleInRadians) from our previous examples.
Example 2-12. Scale and rotation combined
function drawScreen() {
context.setTransform(1,0,0,1,0,0);
var angleInRadians = 45 * Math.PI / 180;
var x = 100;
var y = 100;
var width = 50;
var height = 50;
context.translate(x+.5*width, y+.5*height);
context.scale(2,2);
context.rotate(angleInRadians);
context.fillStyle = "red";
context.fillRect(-.5*width,-.5*height , width, height);
}
Figure 2-20. Scale and rotation combined
Example 2-13 also combines rotation and scale, this time using a rectangle. Figure 2-21 reveals what it creates.
Example 2-13. Scale and rotate a nonsquare object