HTML and CSS Reference
In-Depth Information
Text Arranger Version 2.0
Now, try the new version of Text Arranger, shown in
Example 3-2
. You can see that
we have added a ton of new options that did not exist in version 1.0. One of the most
striking things is how fluidly the text grows and shrinks as the font size is updated.
Now, imagine scripting the font size to create animations. How would you do that?
Could you create an application to record the manipulations the user makes with Text
Arranger, and then play them back in real time?
Also, notice how all the alignment options affect one another. Experiment with how
changing the text direction affects the vertical alignment. Choose different font faces
and see how they affect the baseline. Do you see how an application like Text Arranger
can help you understand the complex relationships of all the text properties on HTML5
Canvas in an interactive and—dare we say—fun way?
Example 3-2. Text Arranger 2.0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH3EX2: Text Arranger Version 2.0</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var message = "your text";
var fillOrStroke = "fill";
var fontSize = "50";
var fontFace = "serif";
var textFillColor = "#ff0000";
var textBaseline = "middle";
var textAlign = "center";
var fontWeight = "normal";
var fontStyle = "normal";
