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 interesting:
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
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>
CH3EX3: Text Arranger 3.0</title>
<
script
src
=
"modernizr.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
()
{
var
patternPreload
=
new
Image
();
patternPreload
.
onload
=
eventAssetsLoaded
;
patternPreload
.
src
=
"texture.jpg"
;
}
function
eventAssetsLoaded
()
{
canvasApp
();
}
function
canvasApp
()
{
var
message
=
"your text"
;
var
fontSize
=
"50"
;
var
fontFace
=
"serif"
;
var
textFillColor
=
"#ff0000"
;
var
textAlpha
=
1
;
var
shadowX
=
1
;
var
shadowY
=
1
;
var
shadowBlur
=
1
;
var
shadowColor
=
"#707070"
;
var
textBaseline
=
"middle"
;
var
textAlign
=
"center"
;
var
fillOrStroke
=
"fill"
;
var
fontWeight
=
"normal" ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.