HTML5 Canvas [27]
Chapter 3. The HTML5 Canvas Text API
The HTML5 Canvas Text API allows developers to render text on an HTML page in ways that were either tricky or next to impossible before its invention.
We are providing an in-depth analysis of the HTML5 Canvas Text API because it is one of the most basic ways to interact with the canvas. However, that does not mean it was the first Canvas API feature developed. In fact, for many browsers, it was one of the last parts implemented.
There was a time in the recent past when HTML5 Canvas Text API support in browsers was spotty at best. Back then, using modernizr.js to test for text support would have been a good idea. However, at this historic moment, all modern browser versions (besides IE) support the HTML5 Canvas Text API in some way.
This chapter will create an application named “Text Arranger” to demonstrate the features and interdependencies of the HTML5 Canvas Text API. This application will display a single line of text in an almost infinite number of ways. This is also a useful tool to see whether support for text is common among web browsers. Later in this chapter you will see that some text features are incompatible when drawn on the canvas at the same time.
Displaying Basic Text
Displaying text on HTML5 Canvas is simple. In fact, we covered the very basics in Chapter 1. First, we will review these basics, and then we will show you how to make them work with the Text Arranger application.
Basic Text Display
The simplest way to define text to be displayed on the canvas is to set the context.font style using standard values for CSS font style attributes: font-style, font-weight, font-size, and font-face.
We will discuss each of these attributes in detail in the upcoming section Setting the Text Font. All you need to know now is that a font designation of some type is required. Here is a simple example of setting a 50-point serif font:
context.font = "50px serif";
You also need to set the color of the text. For filled text, you would use the context.fillStyle attribute and set it using a standard CSS color, or with a CanvasGradient or CanvasPattern object. We will discuss the latter two options later in the chapter.
Finally, you call the context.fillText() method, passing the text to be displayed and the x and y positions of the text on the canvas.
Below is an example of all three basic lines of code required to display filled text on HTML5 Canvas:
context.font = "50px serif"
context.fillStyle = "#FF0000";
context.fillText ("Hello World", 100, 80);
If you do not specify a font, the default 10px sans-serif will be used automatically.
Handling Basic Text in Text Arranger
For Text Arranger, we are going to allow the user to set the text displayed by the call to context.fillText(). To do this, we will create a variable named message where we will store the user-supplied text. We will later use that variable in our call to context.fillText(), inside the standard drawScreen() method that we introduced in Chapter 1 and will continue to use throughout this book:
var message = "your text";
...
function drawScreen() {
...
context.fillStyle = "#FF0000";
context.fillText (message, 100, 80);
}
To change the text displayed on the canvas to the text entered by the user, we need to create an event handler for the text box keyup event. This means that whenever someone changes text in the box, the event handler function will be called.
To make this work, we are going to name our text box in our HTML
Communicating Between HTML Forms and the Canvas
Back in our JavaScript