HTML and CSS Reference
context.fillStyle = "red";
context.fillRect(-.5*width,-.5*height , width, height);
Figure 2-21. Scale and rotate a nonsquare object
Finding the Center of Any Shape
The rotation and scale of a rectangle or any other shape we draw on the canvas acts
much like that of a square. In fact, as long as we are sure to translate to the center of
our shape before we scale, rotate, or scale and rotate, we will see the results we expect
from our simple transformations. Keep in mind that the “center” of any shape will be
the x value that is half its width, and the y value that is half its height. We need to use
the bounding box theory when we attempt to find this center point.
Figure 2-22 demonstrates this theory. Even though the shape is not a simple square,
we have been able to find a bounding box that encompasses each point of the object.
Figure 2-22 is roughly square, but the same theory holds for rectangle-shaped bounding
Figure 2-22. The bounding box of a complex shape