HTML5 Canvas [20]
Lesson 2: We must “translate” the point of origin to the center of our shape to rotate it around its own center
Let’s change Example 2-8 to rotate the red square 45 degrees while keeping it in its current location.
First, we take the numbers we applied to the fillRect() function call to create a few variables to hold the red square’s attributes. This is not necessary, but it will make the code much easier to read and change later:
var x = 100;
var y = 100;
var width = 50;
var height = 50;
Next, using the context.translate() function call, we must change the origin of the canvas to be the center of the red square we want to rotate and draw. This function moves the origin of the canvas to the accepted x and y locations. The center of our red square will now be the desired top-left corner x location for our object (100), plus half the width of our object. Using the variables we created to hold attributes of the red square, this would look like:
x+0.5*width
Next, we must find the y location for the origin translation. This time, we use the y value of the top-left corner of our shape and the height of the shape:
y+.05*height
The translate() function call looks like this:
context.translate(x+.05*width, y+.05*height)
Now that we have translated the canvas to the correct point, we can do our rotation. The code has not changed:
context.rotate(angleInRadians);
Finally, we need to draw our shape. We cannot simply reuse the same values from Example 2-8 because the canvas origin point has moved to the center of the location where we want to draw our object. You can now consider 125,125 as the starting point for all draw operations. We get 125 for x by taking the upper-left corner of the square (100) and adding half its width (25). We do the same for the y origin position. The translate() method call accomplishes this.
We will need to draw the object starting with the correct upper-left coordinates for x and y. We do this by subtracting half the width of our object from the origin x, and half the height of our object from the origin y:
context.fillRect(-0.5*width,-0.5*height, width, height);
Why do we do this? Figure 2-14 illustrates the situation.
Consider that we want to draw our square starting at the top-left corner. If our origin point is at 125,125, the top left is actually 100,100. However, we have translated our origin so the canvas now considers 125,125 to be 0,0. To start our box drawing at the nontranslated canvas, we have to start at –25,–25 on the “translated” canvas.
This forces us to draw our box as though the origin is at 0,0, not 125,125. Therefore, when we do the actual drawing of the box, we must use these coordinates, as shown in Figure 2-15.
Figure 2-14. The newly translated point
Figure 2-15. Drawing with a translated point
In summary, we needed to change the point of origin to the center of our square so it would rotate around that point. But when we draw the square, we need our code to act as though the (125,125) point is actually (0,0). If we had not translated the origin, we could have used the (125,125) point as the center of our square (as in Figure 2-14). Example 2-9 demonstrates how this works, creating the result shown in Figure 2-16.
Example 2-9. Rotation around the center point
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;
var x = 100;
var y = 100;
var width = 50;
var height = 50;
context.translate(x+.5*width, y+.5*height);
context.rotate(angleInRadians);
context.fillStyle = "red";
context.fillRect(-.5*width,-.5*height , width, height);
}
Figure 2-16. Rotation around the center point
Let’s look