几乎每个基于CANVAS的应用程序都要同文本打交道。某些应用程序仅仅是配置并显示文本而已，然而另外一些应用程序则会支持复杂的文本编辑。
canvas元素只支持及少数的文本操作功能，在写作本书时，它尚未提供那些在很多基础的文本编辑器中都能找到的功能，例如文本选择、复制与粘贴，以及文本滚动等。不过，它也提供了一些必备的基本功能，例如文本的描边与填充，向canvas之中放置文本，以及用像素为单位来计算任意字符串的宽度等。canvas的绘图环境对象提供了如下3个与文本有关的方法：
strokeText(text,x,y)
fillText(text,x,y)
measureText(text)
measureText()方法所返回的对象中，包含一个名为width的属性，它的值代表你传递给该方法的文本所占据的宽度。canvas的绘图环境对象中有三个与文本有关的属性；
font
testAlign
textBaseline
用户可以通过font属性来设置稍后绘制时所使用的字型，而textAlign与textBaseline属性则可以让用户设置文本在canvas之内的定位方式。现在就来详细地讲讲这些方法和属性。
文本的描边与填充。
该应用程序提供了一些复选框，让用户可以通过它们来控制是否要对所绘文本进行描边、填充及运用阴影效果。
该段javascript代码获取了指向那三个复选框对象的引用，并分别向每个控件中增加了一个用于绘制背景及文本的onchange事件处理器。
此范例应用程序分别使用fillText（）与strokeText（）方法来对文本进行填充与描边操作。这两个方法都接受三个参数，第一个参数是所要绘制的文本，剩下的两个参数指定文本的绘制位置。所画文本的精确位置，要取决于textAlign与textBaseline属性。
html代码：
1 <head> 2 <title>Stroking and Filling Text</title> 3 <style> 4 body { 5 background: #eeeeee; 6 } 7 8 #canvas { 9 margin-left: 10px; 10 -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px; 11 -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px; 12 box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px; 13 border: 1px solid cornflowerblue; 14 background: #ffffff; 15 } 16 17 #controls { 18 margin: 10px; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div id='controls'> 25 <input id='strokeCheckbox' type='checkbox' checked/>Stroke 26 <input id='fillCheckbox' type='checkbox' checked/>Fill 27 <input id='shadowCheckbox' type='checkbox' checked/>Shadow 28 </div> 29 30 <canvas id='canvas' width='600' height='220'> 31 Canvas not supported 32 </canvas> 33 34 <script src='example.js'></script> 35 </body> 36 </html>
example.js代码：
1 var canvas = document.getElementById('canvas'), 2 context = canvas.getContext('2d'), 3 4 fillCheckbox = document.getElementById('fillCheckbox'), 5 strokeCheckbox = document.getElementById('strokeCheckbox'), 6 shadowCheckbox = document.getElementById('shadowCheckbox'), 7 8 text='HTML5'; 9 10 // Functions.......................................................... 11 12 function draw() { 13 context.clearRect(0, 0, canvas.width, canvas.height); 14 drawBackground(); 15 16 if (shadowCheckbox.checked) turnShadowsOn(); 17 else turnShadowsOff(); 18 19 drawText(); 20 } 21 22 function drawBackground() { // Ruled paper 23 var STEP_Y = 12, 24 TOP_MARGIN = STEP_Y * 4, 25 LEFT_MARGIN = STEP_Y * 3, 26 i = context.canvas.height; 27 28 // Horizontal lines 29 30 context.strokeStyle = 'lightgray'; 31 context.lineWidth = 0.5; 32 33 while(i > TOP_MARGIN) { 34 context.beginPath(); 35 context.moveTo(0, i); 36 context.lineTo(context.canvas.width, i); 37 context.stroke(); 38 i -= STEP_Y; 39 } 40 41 // Vertical line 42 43 context.strokeStyle = 'rgba(100,0,0,0.3)'; 44 context.lineWidth = 1; 45 46 context.beginPath(); 47 48 context.moveTo(LEFT_MARGIN,0); 49 context.lineTo(LEFT_MARGIN,context.canvas.height); 50 context.stroke(); 51 } 52 53 function turnShadowsOn() { 54 if (navigator.userAgent.indexOf('Opera') === -1) { 55 context.shadowColor = 'rgba(0, 0, 0, 0.8)'; 56 } 57 context.shadowOffsetX = 5; 58 context.shadowOffsetY = 5; 59 context.shadowBlur = 10; 60 } 61 62 function turnShadowsOff() { 63 if (navigator.userAgent.indexOf('Opera') === -1) { 64 context.shadowColor = undefined; 65 } 66 context.shadowOffsetX = 0; 67 context.shadowOffsetY = 0; 68 context.shadowBlur = 0; 69 } 70 71 function drawText() { 72 var TEXT_X = 65, 73 TEXT_Y = canvas.height/2 + 35; 74 75 context.strokeStyle = 'blue'; 76 77 if (fillCheckbox.checked) context.fillText (text, TEXT_X, TEXT_Y); 78 if (strokeCheckbox.checked) context.strokeText(text, TEXT_X, TEXT_Y); 79 } 80 81 // Event handlers..................................................... 82 83 fillCheckbox.onchange = draw; 84 strokeCheckbox.onchange = draw; 85 shadowCheckbox.onchange = draw; 86 87 // Initialization..................................................... 88 89 context.font = '128px Palatino'; 90 context.lineWidth = 1.0; 91 context.fillStyle = 'cornflowerblue'; 92 93 turnShadowsOn(); 94 95 draw();
fillText（）与strokeText（）方法还会接受一个可选的第四参数，该参数以像素为单位指定了所绘文本的最大宽度。