HTML and CSS Reference
In-Depth Information
Final Version of Text Arranger
The final version of Text Arranger (3.0) brings together all the HTML5 Text API features we
have discussed in this chapter. (See
Example 3-1
.) Play with the final app, and see how the
different options interact with one another. Here are a couple things you might find interest-
ing:
▪ Increasing the text size with a pattern that is the size of the canvas changes the pattern on
the text. (It acts like a mask or window into the pattern itself.)
▪ Canvas width and height are affected by the style width and height (scaling).
Example 3-1. Text Arranger 3.0
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH3EX3: Text Arranger 3.0
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
src
=
"jscolor/jscolor.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
"load"
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
eventWindowLoaded
() {
var
var
patternPreload
=
new
new
Image
();
patternPreload
.
onload
=
eventAssetsLoaded
;
patternPreload
.
src
=
"texture.jpg"
;
}
function
function
eventAssetsLoaded
() {
canvasApp
();
}
function
function
canvasApp
() {
