HTML5 Canvas [22]
function drawScreen() {
//now draw a red rectangle
context.setTransform(1,0,0,1,0,0);
var angleInRadians = 90 * Math.PI / 180;
var x = 100;
var y = 100;
var width = 100;
var height = 50;
context.translate(x+.5*width, y+.5*height);
context.rotate(angleInRadians);
context.scale(2,2);
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 boxes.
Figure 2-22. The bounding box of a complex shape
Filling Objects with Colors and Gradients
In this chapter, we have quickly looked at color and fill styles as we proceeded through the discussions of basic and complex shape construction. In this section, we will take a deeper look at coloring and filling shapes we draw on the canvas. In addition to these simple colors and fills, there are a number of different gradient styles that we can employ. Furthermore, Canvas also has a method to fill shapes with bitmap images (see Chapter 4).
Setting Basic Fill Colors
The Canvas fillStyle property is used to set a basic color for filling shapes on the canvas. We saw this earlier in the chapter when we used simple color names for our fillStyle. An example is:
context.fillStyle = "red";
Below is a list of the usable color string values from the HTML4 specification. As of this writing, the HTML5 color specification has not been set. In the absence of any additional HTML5-specific colors, the HTML4 colors will work properly in HTML5:
Black = #000000
Green = #008000
Silver = #C0C0C0
Lime = #00FF00
Gray = #808080
Olive = #808000
White = #FFFFFF
Yellow = #FFFF00
Maroon = #800000
Navy = #000080
Red = #FF0000
Blue = #0000FF
Purple = #800080
Teal = #008080
Fuchsia = #FF00FF
Aqua = #00FFFF
NOTE
All these color values will work with the strokeStyle as well as the fillStyle.
Of course, using a string for the color name is not the only available method of specifying a solid color fill. The list below includes a few other methods:
Setting the fill color with the rgb() method
The rgb() method lets us use the 24-bit RGB value when specifying our fill colors:
context.fillStyle = rgb(255,0,0);
This will result in the same red color as the string value above.
Setting the fill color with a hex number string
We can also set the fillStyle color with a hex number in a string:
context.fillStyle = "#ff0000";
Setting the fill color with the rgba() method
The rgba() method allows us to specify a 32-bit color value with the final 8 bits representing the alpha value of the fill color:
context.fillStyle = rgba(255,0,0,1);
The alpha value can be from 1 (opaque) to 0 (transparent).
Filling Shapes with Gradients
There are two basic options for creating gradient fills on the canvas: linear and radial. A linear gradient creates a horizontal, vertical, or diagonal fill pattern; the radial variety creates a fill that “radiates” from a central point in a circular fashion. Let’s look at some examples of each.
Linear gradients
Linear gradients come in three basic styles: horizontal, vertical, and diagonal. We control where colors change in our gradient by setting color stops at points along the length of the object we wish to fill.
Linear horizontal gradients
Example 2-14 creates a simple