HTML and CSS Reference
In-Depth Information
Resetting the Canvas clearRect Function
The
clearRect()
function takes in the start x,y location and the width and height to clear the
Canvas:
var
var
w
=
theCanvas
.
width
;
var
var
h
=
theCanvas
.
height
;
context
.
clearRect
(
0
,
0
,
w
,
h
);
Let's test out using the
clearRect()
function by animating a path across the Canvas
date the location of the path. The entire set of code for this example is presented because it is
more involved than simply drawing a path or a shape on the Canvas at a single time.
Example 2-28. Using the clearRect() function
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
Chapter 2 Example 28: Animating a Path
</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'
);
}