幾乎每個基於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（）方法還會接受一個可選的第四參數，該參數以像素為單位指定了所繪文本的最大寬度。