HTML and CSS Reference
In-Depth Information
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;
}
Example 3-1
shows the full code for Text Arranger. Test it out to see how the user
controls in HTML affect the canvas. There are not many ways to change the text here,
but you can see the difference between
fillText
and
strokeText
. In the next section,
we will update this application to configure and render the text in multiple ways.
Example 3-1. Text Arranger 1.0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH3EX1: Text Arranger Version 1.0</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
