Question

A 2D canvas drawing context provides the methods fillText and strokeText . The latter can be useful for outlining letters, but usually fillText is what you need. It will fill the given text with the current fillColor .

<canvas></canvas>
<script>
  var cx = document.querySelector("canvas").getContext("2d");
  cx.font = "28px Georgia";
  cx.fillStyle = "fuchsia";
  cx.fillText("I can draw text, too!", 10, 50);
</script>

You can specify the size, style, and font of the text with the font property. This example just gives a font size and family name. You can add italic or bold to the start of the string to select a style.

The last two arguments to fillText (and strokeText ) provide the position at which the font is drawn. By default, they indicate the position of the start of the text’s alphabetic baseline, which is the line that letters “stand” on, not counting hanging parts in letters like j or p. You can change the horizontal position by setting the textAlign property to "end" or "center" and the vertical position by setting textBaseline to "top" , "middle" , or "bottom" .

We will come back to our pie chart, and the problem of labeling the slices, in the exercises at the end of the chapter.

This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.