To change the fillStyle of the next objects drawn, add code to change the fillStyle attribute. For example, changing the fillStyle to orange:
context.fillStyle = “orange”;
53
Chapter 3: Creating Objects
The terms fillStyle and fillText are similar, which creates a bit of con- fusion. The term fillStyle is an attribute that is assigned a value using an = operation. The term fillText is a function that is executed using the param- eters inside parentheses ( ). Another way to understand this distinction is to remember that the attributes will not appear on the Canvas until an object is drawn using a function.
Colors
Apply color to object fills and strokes (lines) by using the fillStyle and strokeStyle context attributes. For example:
context.fillStyle = “orange”;
context.strokeStyle = “red”;
You can specify the color of an object in a number of ways, including
Color Specification Example
Color keywords cornflowerblue
Hexadecimal values #6495ED
RGB (red, green, blue) rgb(100, 149, 237)
HSL (hue, saturation, lightness) hsl(219, 58%, 93%)
Color keywords
There are basic and extended keywords for a wide variety of colors, as shown in Figure 3-7. See www.w3.org/TR/css3-color/#svg-color for additional details.
Hexadecimal values
Using a hexadecimal representation for red, green, and blue values allows the creation of more than 16 million different colors. This is useful when design- ing color variations or matching a very specific color. As an example, the extended color “cornflowerblue” has a hexadecimal value of “#6495ED”.
54 Part II: Drawing on Canvas
55
Chapter 3: Creating Objects
Hexadecimal numbers use a base of 16 symbols to represent values, to allow specifying larger numbers with the same number of symbols as a number system with a smaller base, such as the familiar base 10 system of digits 0 through 9. To convert a number between base systems, you can use a con- version website such as
www.statman.info/conversions/hexadecimal.html
RGB and HSL values
Colors can also be defined by using numeric values for combinations of RGB (red, green, blue) or HSL (hue, saturation, lightness). HSL is also referred to as HSV (hue, saturation, value).
RGB specifies numbers for the level of red, green, and blue in numbers from 0 to 255:
rgb(24,50,150)
For example, to create a fillStyle using this color:
context.fillStyle = “rgb(24,50,150)”
HSL specifies a number for hue and percentages for saturation and lightness:
hsl(30,50%,75%)
✓ Hue indicates the position on a circular color wheel starting with red at the zero degree point and wrapping back to red at 360 degrees.
✓ Saturation indicates the amount of color from 0% to 100%.
✓ Lightness indicates the purity of color from 0% to 100%.
To create a fillStyle with the hsl format, use the following line:
context.fillStyle = “hsl(30, 50%, 75%)”
The best way to understand the real meaning of these numbers is to experi- ment with a color design tool such as http://kuler.adobe.com (shown in Figure 3-8).
56 Part II: Drawing on Canvas
© 2012 with express permission from Adobe Systems Incorporated.
Figure 3-8: Color picker.
Gradients
Gradients create transitions between colors, and they can be linear or radial:
✓ Linear gradients transition their colors, as shown in the first three squares and line at the bottom of Figure 3-9.
✓ Radial gradients transition their colors as shown in the last two squares in Figure 3-9.
The objects in Figure 3-9 were created by using the code in Listing 3-4.
57
Chapter 3: Creating Objects
Figure 3-9: Linear and radial gradients.
Listing 3-4: Creating Gradients
<!DOCTYPE HTML> <html> <head> <script>
// A. WINDOW LOAD function.
window.onload = function() {
// A1. CANVAS definition standard variables.
canvas = document.getElementById(“canvasArea”);
context = canvas.getContext(“2d”);
// A2. LAYOUT of first object.
var xPos = 20; var yPos = 20; var gap = 20;
var width = 80; var height = 80;
// A3. ATTRIBUTES.
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 3;
context.shadowColor = “gray”;
context.lineWidth = 4;
// A4. LINEAR HORIZONTAL gradient.
var gradLH = context.createLinearGradient(
20, // Start x 0, // Start y 100, // End x 0); // End y // A5. LINEAR VERTICAL gradient.
var gradLV = context.createLinearGradient(
0, // Start x 0, // Start y 0, // End x
58 Part II: Drawing on Canvas Listing 3-4 (continued)
// A6. LINEAR DIAGONAL gradient.
var gradLD = context.createLinearGradient(
xPos+(2*width)+(2*gap), // Start x yPos, // Start y xPos+220+width, // End x yPos+height); // End y // A7. CENTERED RADIAL gradient.
var gradRC = context.createRadialGradient(
xPos+(3*width)+(3*gap)+(width/2), // Inner circle x yPos+(height/2), // Inner circle y 5, // Inner circle radius xPos+(3*width)+(3*gap)+(width/2), // Outer circle x yPos+(height/2), // Outer circle y 50); // Outer circle radius // A8. OFFSET RADIAL gradient.
var gradRO = context.createRadialGradient(
xPos+(4*width)+(4*gap)+(width/4), // Inner circle x yPos+(height/2), // Inner circle y 15, // Inner circle radius xPos+(4*width)+(4*gap)+(width/2), // Outer circle x yPos+(height/2), // Outer circle y 40); // Outer circle radius // A9. COLORS.
gradLH.addColorStop( 0, “deeppink” );
gradLH.addColorStop(.3, “orange” );
gradLH.addColorStop(.6, “lime” );
gradLH.addColorStop( 1, “yellow” );
gradLV.addColorStop( 0, “red” );
gradLV.addColorStop(.4, “blueviolet” );
gradLV.addColorStop( 1, “gold” );
gradLD.addColorStop( 0, “fuchsia” );
gradLD.addColorStop(.5, “orange” );
gradLD.addColorStop( 1, “springgreen” );
gradRC.addColorStop( 0, “red” );
gradRC.addColorStop(.5, “turquoise” );
gradRC.addColorStop( 1, “olive” );
gradRO.addColorStop( 0, “yellow” );
gradRO.addColorStop(.7, “magenta” );
gradRO.addColorStop( 1, “limegreen” );
// A10. LINEAR gradient objects.
context.fillStyle = gradLH;
59
Chapter 3: Creating Objects
context.fillStyle = gradLD;
context.fillRect (xPos+(2*width)+(2*gap), yPos, width, height);
context.strokeStyle = gradLD;
context.beginPath();
context.moveTo (xPos, yPos+height+gap);
context.lineTo (xPos+(5*width)+(4*gap), yPos+height+gap);
context.stroke();
// A11. RADIAL gradient objects.
context.fillStyle = gradRC;
context.fillRect (xPos+(3*width)+(3*gap), yPos, width, height);
context.fillStyle = gradRO;
context.fillRect (xPos+(4*width)+(4*gap), yPos, width, height);
}
</script> </head> <body>
<div style = “width:525px; height:150px; margin:0 auto; padding:5px;”>
<canvas id = “canvasArea” width = “525” height =”150”
style = “border:2px solid black”>
Your browser doesn’t currently support HTML5 Canvas.
</canvas> </div> </body> </html>
To create gradients, follow these steps: