Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
CHAPTER 36: Using the Canvas Element – Part II > Drawing Text
Drawing Text
We can draw text on the canvas, although the support for doing so is pretty basic. Table 36-6 shows the methods available.
There are three drawing state properties that we can use to control the way that text is drawn, as shown in Table 36-7.
Listing 36-11 shows how we can fill and stroke text. We specify the value for the font property using the same format string as for the CSS font shorthand property, which I described in Chapter 22.
Listing 36-11. Drawing text on the canvas
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {border: thin solid black}
body > * {float:left;}
</style>
</head>
<body>
<canvas id="canvas" width="350" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "lightgrey";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.font = "100px sans-serif";
ctx.fillText("Hello", 50, 100);
ctx.strokeText("Hello", 50, 100);
</script>
</body>
</html>
