HTML and CSS Reference
In-Depth Information
The Basic File Setup for This Chapter
As we proceed through the Drawing API, all the examples in this chapter will use the same
basicfilesetup,shownbelow.Usethiscodeasthebasisforalloftheexampleswecreate.You
will have to change only the contents of the
drawScreen()
function:
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
Ch2BaseFile - Template For Chapter 2 Examples
</title>
</title>
<
script src
=
"modernizr.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'
;
context
.
textBaseline
=
'top'
;
context
.
fillText
(
"Canvas!"
,
0
,
0
);
