文本与图形总是如影随形。为此，2D绘图上下文也提供了绘制文本的方法。绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且，这两个方法都以下列3个属性为基础。
font:表示文本样式、大小及字体，用CSS中指定字体的格式来指定，例如“10排序Arial”。
textAlign:表示文本对齐方式。可能的值有“start”、“end”、“left”、“right”和“center”。建议使用“start”和“end”，不要使用“left”和“right”，因为前两者的意思更稳妥，能同时适合从左到右和从右到左显示阅读的语言。
textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetica”、“ideographic”和“bottom”。
这几个属性都有默认值，因此没有必要每次使用它们都重新设置一遍。fillText()方法使用fillStyle属性绘制文本，而strokeText()方法使用strokeStyle属性为文本描边。相对来说，还是使用fillText()的时候更多，因为该方法模仿了在网页中正常显示文本。例如，下面的代码在前一节创建的表盘上方绘制了数字12：
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",100,20);
因为这里把textAlign设置为“center”,把textBaseline设置为“middle”，所以坐标（100,20）表示的是文本水平和垂直中点的坐标。如果将textAlign设置为“start”，则x坐标表示的是文本左端的位置；设置为“end”,则x坐标表示的是文本右端的位置。例如：
//正常
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",100,20);
//起点对齐
context.textAlign="start";
context.fillText("12",100,40);
//终点对齐
context.textAlign=“end”;
context.fillText("12",100,60);
这一回绘制了三个字符串“12”,每个字符串的x坐标值相同，但textAlign值不同。另外，后两个字符串的y坐标依次增大，以避免相互重叠。结果如下：
表盘中的分针恰好位于正中间，因此文本的水平对齐方式如何变化也能一目了然。类似地，修改textBaseline属性的值可以调整文本的垂直对齐方式：值为“top”，y坐标表示文本顶端；值为“bottom”，y坐标表示文本低端；值为“hanging”、“alphabetic”和“ideographic”,则y坐标分别指向字体的特定基线坐标。
由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText()。这个方法接收一个参数，即要绘制的文本；返回一个TextMetrics对象。返回的对象目前只有一个width属性，但将来还会增加更多度量属性。
measureText()方法利用font、textAlign和textBaseline的当前值计算指定文本的大小。比如，假设你想在一个140像素宽的矩形区域中绘制文本Hello World!，下面的代码从100像素的字体大小开始递减，最终会找到合适的字体的大小。
var fontSize=100;
context.font=fontSize+"px Arial";
while(context.measureText("Hello World!").width>140){
fontSize--;
context.font=fontSize+"px Arial";
}
context.fillText("Hello World!",10,10);
context.fillText("Font size is "+fontSize+"px",10,50);
fillText()和strokeText()方法都可以接收第四个参数，也就是文本的最大像素宽度。不过，这个可选的参数尚未得到所有浏览器支持。提供这个参数后，调用fillText()或strokeText()时，如果传入的字符串大于最大宽度，则绘制的文本字符的高度正确，但宽度会收缩以适应最大宽度。下图展示了这个效果：
