HTML and CSS Reference
In-Depth Information
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'
);
}
var
var
blueObject
=
{};
var
var
redObject
=
{};
blueObject
.
x
=
0
;
blueObject
.
y
=
200
;
blueObject
.
dx
=
2
;
blueObject
.
width
=
48
;
blueObject
.
height
=
48
;
blueObject
.
image
=
new
new
Image
();
blueObject
.
image
.
src
=
"blueplus.png"
;
context
.
drawImage
(
blueObject
.
image
,
0
,
0
);
blueObject
.
blueImageData
=
context
.
getImageData
(
0
,
0
,
blueObject
.
width
,
blueObject
.
height
);
context
.
clearRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
redObject
.
x
=
348
;
redObject
.
y
=
200
;
redObject
.
dx
=-
2
;
redObject
.
width
=
48
;
redObject
.
height
=
48
;
redObject
.
image
=
new
new
Image
();
redObject
.
image
.
src
=
"redcircle.png"
;
context
.
drawImage
(
redObject
.
image
,
0
,
0
);
redObject
.
redImageData
=
context
.
getImageData
(
0
,
0
,
redObject
.
width
,
redObject
.
height
);
context
.
clearRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);