Canvas的繪圖環境提供三個方法如：
繪製填充文字：fillText();
繪製描邊文字：strokeText();
繪製文字並返回一個物件：measure();
measure()方法返回的物件中包含一個width屬性，該屬性表達繪製的文字所佔據的寬度；

<canvas id="canvas1" width="300" height="150"></canvas>

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");


// fill font
context.font = "60px Palatino";
context.fillStyle = "red";
context.fillText("Cancas", 30, 60);


// stroke font
context.strokeStyle = "yellow";
context.strokeText("Cancas", 30, 60);


// back measure object 
context.fillStyle = "blue";
var measure = context.measureText("Cancas", 30, 120);


// print text width
console.log(measure.width);
 

Canvas繪圖環境提供三個屬性如：
設定稍後繪圖環境所繪製文字的字型：font;
文字水平方向定位：textAlign;

文字垂直方向定位：textBaseline;

textBaseline屬性包含的值：
top
bottom
middle
alphabetic
ideographic
hanging


textBaseline屬性的預設值alphabetic;
alphabetic:該值用於繪製由基於拉丁字母的語言所組成的字串。
ideographic:該用於繪製日文或中文字元；
hanging:該值用於繪製各種印度語字串；


top、bottom與middle這三個值與特定的語言不相關，它們代表文本週圍的邊界框之內的某個位置，這個邊界框也叫做“字元方框”(em square)

<canvas id="canvas2" width="500" height="300"></canvas>

var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");


function drawBackground() {


	var STEP_Y = 12,
	    TOP_MARGIN = STEP_Y * 4,
	    LEFT_MARGIN = STEP_Y * 3,
	    i = context.canvas.height;




	context.strokeStyle = "lightgray";
	context.lineWidth = 1;


	while( i > STEP_Y ) {
		context.beginPath();
		context.moveTo(0, i + 0.5);
		context.lineTo(context.canvas.width,  i + 0.5);
		context.stroke();
		i -= STEP_Y;
	} 


	context.strokeStyle = "rgba(100, 0, 0, 0.3)";
	context.lineWidth = 1;
	context.beginPath();
	context.moveTo(LEFT_MARGIN, 0);
	context.lineTo(LEFT_MARGIN, context.canvas.height);
	context.stroke();


}
// draw background
drawBackground();
	


// 給文字填充漸變效果
var gradient = context.createLinearGradient(0, 0,
	           canvas.width, canvas.height);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");


context.font = "60px Arial";
context.textAlign = "left";
context.textBaseline = "middle";
context.fillStyle = gradient;
context.fillText("CANVAS", 60, 60);


context.strokeStyle = "red";
context.beginPath();
context.moveTo(0.5, 60);
context.lineTo(canvas.width+0.5, 60);
context.stroke();
 

注意：在呼叫measureText方法之前先設定好字形
在使用measureText方法時，常見的錯誤就是在呼叫完該方法之後，才去設定字形。請注意,measuerText方法是根據當前的字形來計算字串的寬度，因此，如果你在呼叫measureText方法之後去改變字形，那麼該方法返回的寬度並不能反映出以那種字形來度量的實際文字寬度

在圓弧周圍繪製文字

<canvas id="canvas3" width="500" height="500"></canvas>

var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");


// 圓弧的屬性，圓弧的座標及圓弧的半徑// 
var circle = {
	x: canvas.width/2,
	y: canvas.height/2,
	radius:200
}


function drawCircularText(string, startAngle, endAngle) {
 
 var radius = circle.radius,//圓弧半徑
 	 angleDecrement = (startAngle - endAngle)/(string.length - 1),//計算出第一個字元所佔有的弧度
 	 angle = parseFloat( startAngle ),//將弧度轉換浮點型
 	 index = 0,//在canvas中繪製到第幾個字元的索引
 	 character;//把當前繪製的字元賦予它




// 儲存當前繪圖環境（canvas的屬性、剪輯區域、translate）
 context.save();


 context.fillStyle = "red";
 context.strokeStyle = "blue";
 context.font = "20px Lucida Sans";


 while ( index < string.length ) {


 	// 獲取當前要繪製的字元
 	character = string.charAt(index);


 	// 儲存當前之前的環境增狀態
 	context.save();
 	// 清除當前路徑的子路徑
 	context.beginPath();


 	// 位移
 	context.translate(circle.x + Math.cos(angle) * radius,
 		              circle.y - Math.sin(angle) * radius);


 	// 旋轉弧度
 	context.rotate(Math.PI/2 - angle);


 	// 填充文字
 	context.fillText(character, 0, 0);
 	// 描邊文字
 	context.strokeText( character, 0, 0);
 	// 重新計算下一個字元的弧度
 	angle -= angleDecrement;
 	// 獲取下一個字元的索引
 	index++;


 	// 還原上次save()狀態
 	context.restore();


 }


 context.restore();
}
 


 drawCircularText("canvas's hello word  canvas's hello word", Math.PI*2, Math.PI / 8);