HTML and CSS Reference
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 (be-
sides 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 .