Here’s an example from code section A5 in Listing 3-8:
70 Part II: Drawing on Canvas
Displaying Text
You’ve already seen an example of displaying text in a Canvas application in Chapter 1. It’s a common and important function. Text even has its own Application Programming Interface (API).
To display text, first set the characteristics of the text by assigning values to the appropriate context attributes, such as:
context.font = “italic bold 12px Arial”;
context.fillStyle = “black”;
context.textAlign = “center”;
Then apply the fillText() method to the context passing as parameters the text to be displayed and its coordinates on the Canvas:
context.fillText(mText, xPos, yPos);
An example is shown earlier in Figure 3-2, which was generated using the code in Listing 3-2.
Font attributes
You can set a number of font properties by using context.font: style, weight, size, and face. These are based on Cascading Style Sheet (CSS) speci- fications. Not all values are required. If values aren’t specified, the defaults are applied. The format of the statement to assign font attributes is
context.font = “style weight size face”;
For example:
context.font = “italic bold 20px arial”;
Font style
Styles available include:
✓ normal (the default)
✓ italic
✓ oblique (similar to italic, usually associated with sans-serif faces) inherit (style comes from the parent element)
71
Chapter 3: Creating Objects
Font weight
Weights available include ✓ normal (the default)
✓ bold | bolder
✓ lighter
✓ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ✓ inherit (weight comes from the parent element)
Font size
Font sizes can be specified in:
✓ px (pixels) for exact size ✓ pt (points) for exact size
✓ em (ems) 1 em is equal to the font size set for the web page
Canvas font sizes are normally specified in pixels or points. The range of font sizes available depends on the browser displaying the web page. Most brows- ers support sizes in the hundreds of pixels. If you’re using large sizes, test your application on the major browsers to verify they can handle your text.
Font face
Font faces, also referred to as type faces, give text their individual appear- ance. The font faces supported depend on the browser displaying the web page. Browsers don’t support the wide variety of font faces found on word processors. One way to deal with this restricted selection is to specify a font family name for the font face: sans-serif, serif, or monospace. If you want to specify an individual font name, some choices that are generally supported by browsers are
✓ Sans-serif: Arial, Verdana
✓ Serif: Georgia, Times New Roman, Times ✓ Monospace: Courier New, Courier
Text baseline
The textBaseline attribute controls the vertical positioning of text relative to a virtual baseline upon which most letters in a line of text sit. The attribute
72 Part II: Drawing on Canvas
Figure 3-14: Text baselines.
Some of the textBaseline attributes produce counterintuitive results. For example, using the top value places text lower on the Canvas than using the bottom value.
The code in Listing 3-9 produced Figure 3-13, which shows the positioning options for textBaseline:
✓ top: The baseline is above the text.
✓ hanging: The baseline is above the text.
✓ middle: The baseline is through the middle of the text.
✓ alphabetic: The baseline is at the base of letters without a lower loop, such as the letter e.
✓ ideographic: The baseline is below the text, touching the bottom of characters with a descending loop, such as g.
✓ bottom: The baseline is below the text.
Listing 3-9: Using Text Baselines
<!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. TEXT variables.
var xPos = 75; var yPos = canvas.height/2;
// A3. ATTRIBUTES.
context.font = “10pt Arial”; context.fillStyle = “black”;
context.textAlign = “right”; context.strokeStyle = “hotpink”;
context.lineWidth = 1;
73
Chapter 3: Creating Objects
context.moveTo(0, yPos);
context.lineTo(canvas.width, yPos);
context.stroke();
// A5. TEXT BASELINE examples.
context.textBaseline = “top”;
context.fillText(“|top”, xPos*1, yPos);
context.textBaseline = “hanging”;
context.fillText(“|hanging”, xPos*2, yPos);
context.textBaseline = “middle”;
context.fillText(“|middle”, xPos*3, yPos);
context.textBaseline = “alphabetic”;
context.fillText(“|alphabetic”, xPos*4, yPos);
context.textBaseline = “ideographic”;
context.fillText(“|ideographic”, xPos*5, yPos);
context.textBaseline = “bottom”;
context.fillText(“|bottom”, xPos*6, yPos);
}
</script> </head> <body>
<div style = “width:500px; height:50px; margin:0 auto; padding:5px;”>
<canvas id = “canvasArea” width = “500” height = “50”
style = “border:2px solid black”>
Your browser doesn’t currently support HTML5 Canvas.
</canvas> </div> </body> </html>
There are some textBaseline implementation differences between browsers.
Watch for these variations, especially when using the hanging or ideographic attributes. If your application requires very precise positioning, test your font face with your characters by using Listing 3-9.
To test the text baseline using Listing 3-9, follow these steps: