Canvas - HTML5 with Visual Studio 2012 - page 232

■ The makeNextMove() function uses an often misunderstood feature of Javascript called closure.
This function defines another function called inner() , which does the actual work. The inner() function is then
returned. The makeNextMove() function will be called by the window object when the timer expires. However, all of
the variables that it uses, such as the array of chess pieces, will be out of scope. The inner() function will be able
to access these variables so this works around the scope issue. For more information about closures, see this article:
http://stackoverflow.com/questions/111102/how-do-javascript-closures-work .

Caution

Modeling the Solar System
For the next canvas you'll draw a moving model of our solar system. For the sake of time, you'll show only the
earth, sun, and moon. This implementation will take advantage of two important features of canvas:

• Paths

• Transformations

Using Paths
As I mentioned earlier, the only simple shape that canvas supports is the rectangle, which you used in the
previous example. For all other shapes you must define a path. The basic approach to defining paths in canvas is
very similar to SVG. You use a move to command to set the starting point and then some combination of line and
curve commands to draw a shape.
In canvas, you always start with a beginPath() command. After calling the desired drawing commands, the
path is completed by either calling stroke() to draw an outline of the shape or fill() to fill in the shape. The
shape is not actually drawn to the canvas until either stroke() or fill() is called. If you call beginPath() again,
before completing the current shape (with a call to stroke() or fill() ), the canvas will ignore the previous
uncompleted commands. The same strokeStyle and fillStyle properties that you used with rectangles also
define the color of the path.
The actual drawing commands are:

moveTo() •

lineTo() •

arcTo() •

bezierCurveTo()

•

quadraticCurveTo() •

In addition, these functions can be used for drawing:

closePath() - this performs a lineTo() command from the current position to the
starting position to close in the shape. If you use the fill() command, the closePath()
function is automatically called if you're not currently at the starting position.

•

arc() - This draws an arc at the specified location; you don't have to move there first.
However, this is still treated as a path; you need to first call beginPath() and the arc is not
actually drawn until you call either stroke() or fill() .

•