HTML and CSS Reference
In-Depth Information
Drawing the Text
Finally, we draw the text to the Canvas, and the
drawScreen()
function is complete. In 20
milliseconds,
drawScreen()
will be called again, the
alpha
value will be updated, and the
text will be redrawn:
context
.
font
=
"72px Sans-Serif"
;
context
.
textBaseline
=
"top"
;
context
.
fillStyle
=
"#FFFFFF"
;
context
.
fillText
(
text
,
150
,
200
);
}
The full code for this example is as follows:
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH1EX5 : Hello World Animated
</title>
</title>
<script
<script src=
"modernizr.js"
></script>
></script>
<script
<script type=
"text/javascript"
>
window
.
addEventListener
(
"load"
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
var
var
theCanvas
=
document
.
getElementById
(
"canvasOne"
);
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
function
function
drawScreen
() {
//background
context
.
globalAlpha
=
1
;
context
.
fillStyle
=
"#000000"
;
context
.
fillRect
(
0
,
0
,
640
,
480
);
