The HTML5 Canvas Text API - HTML5 Canvas - page 77

var message = "your text";
var fillOrStroke ="fill";
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox");
formElement.addEventListener("keyup", textBoxChanged, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener("change", fillOrStrokeChanged, false);
drawScreen();
function drawScreen() {
//Background
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = "#000000";
context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10);
//Text
context.font = "50px serif"
var metrics = context.measureText(message);
var textWidth = metrics.width;
var xPosition = (theCanvas.width/2) - (textWidth/2);
var yPosition = (theCanvas.height/2);
switch(fillOrStroke) {
case "fill":
context.fillStyle = "#FF0000";
context.fillText (message, xPosition,yPosition);
break;
case "stroke":
context.strokeStyle = "#FF0000";
context.strokeText (message, xPosition,yPosition);
break;
case "both":
context.fillStyle = "#FF0000";
context.fillText (message, xPosition ,yPosition);
context.strokeStyle = "#000000";
context.strokeText (message, xPosition,yPosition);
break;
}
}