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
( Example 2-28 ) . We will accomplish this by implementing the setTimeOut() function
presented in Chapter 1 . It will be used to repeatedly call our drawScreen() function and up-
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' );
}
Search WWH ::




Custom Search