Bouncing Ball - The Essential Guide to HTML5 - page 71

filled-in path. Notice that the arc method uses variables to specify the coordinates of the center of the
circle and the radius. The parameters 0 and Math.PI*2 represent angles, in this case 0 to Math.PI*2,
making a complete circle. The true parameter indicates counterclockwise, though in this particular case,
false would produce the same effect.
ctx.beginPath();
ctx.fillStyle ="rgb(200,0,50)";
ctx.arc(ballx, bally, ballrad,0,Math.PI*2,true);
ctx.fill();
For the first version of the bouncing ball, the box is drawn as a rectangle outline. The width of the outline,
termed the stroke, is set using
ctx.lineWidth = ballrad;
You can experiment with the line width. Keep in mind that if you make the width small and set the ball to
travel fast, the ball can bounce past the wall in one step.
The statement that draws the rectangle is
ctx.strokeRect(boxx,boxy,boxwidth,boxheight);
I put the code for the ball before the code for the rectangle so the rectangle would be on top. I thought this
looked better for the bouncing.
The second version of the program displays an image for the ball. This requires code to set up an img
object using the new operator with a call to Image() , assigning that to a variable, and giving the src
property a value. In the application, we do all this in a single statement, but lets take a look at the
individual parts.
You read about var statements in Chapter 2. Such statements define, or declare , a variable. It is okay to
use the name img for our var here; theres no conflict with the HTML img element. The new operator is well-
named: it creates a new object, in this case of the built-in type Image . The Image function does not take
any arguments, so there are just opening and closing parentheses.
Image objects have attributes, just like HTML elements such as img do. The particular image used is
indicated by the value of the src attribute. Here, "pearl.jpg" is the name of an image file located in the
same folder as the HTML document. The following two statements set up the img variable and set its src
(source) to the address, the URL, of the image file.
var img = new Image();
img.src="pearl.jpg";
For your application, use the name of an image file youve chosen. It can be of type JPG, PNG, or GIF,
and be sure to either put it in the same folder as your HTML document or include the entire path. Be careful
about matching the case both in the name and the extension.
To draw this image on the canvas, we need a single line of code specifying the image object, the location
for the upper left corner of the image, and the width and length to be used in the display of the image. As
was the case with the rectangles, this code is a call of a method of a context object, so I use the variable
ctx defined in the init function. I need to adjust the ballx and bally values I used for the center of the
circle to indicate this upper corner. I use 2 times the ball radius for both the width and the length. The
statement is
ctx.drawImage(img,ballx-ballrad,bally-ballrad,2*ballrad,2*ballrad);