HTML and CSS Reference
In-Depth Information
The Basic File Setup for This Chapter
All the examples in this chapter will use the same basic file setup for displaying our demon-
strations as we proceed through the Drawing API. Use the following as the basis for all the
examples we create—you will need to change only the contents of the
drawScreen()
func-
tion:
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
Ch4BaseFile - Template For Chapter 4 Examples
</title>
</title>
<
script src
=
"modernizr-1.6.min.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
canvasApp
(){
iif
(
!
canvasSupport
()) {
return
return
;
}
else
else
{
var
var
theCanvas
=
document
.
getElementById
(
"canvas"
);
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
}
drawScreen
();
function
function
drawScreen
() {
//make changes here
context
.
fillStyle
=
'#aaaaaa'
;
context
.
fillRect
(
0
,
0
,
200
,
200
);
context
.
fillStyle
=
'#000000'
;
context
.
font
=
'20px sans-serif'
;
context
.
textBaseline
=
'top'
;
